Having a simple problem. I have anchor tags that are links to external websites, which are underneath a p element, inside a 12 column grid. I have used col-4 on them, the text is staying within the container but the anchors text is not breaking onto another line. The p element and its text keeps to the col-4, but the anchor text overflows. Please help
HTML
<div class="grouped-content__selection">
<div class="col4">
<h3>Go Kart Sorihuela Costa</h3>
<p>Hello <br>Website: This line of text goes over</p>
</div>
</div>
CSS
.grouped-content__selection {
border-top: 2px solid #184450;
padding: 2rem 1rem 1rem 1rem;
overflow: hidden;
height: 100%;}
I think a{white-space: pre-wrap} should do the trick
here is a link to a similar issue
Try adding a "display: contents" style to < a > tag.
inline:
<p>Hello <br>Website: This line of text goes over</p>
external:
<p>Hello <br>Website: This line of text goes over</p>
css file:
.align-link{
display: contents;
}
a { word-wrap: break-word; } worked for me, thanks to this link
I created an section with three articles, im wondering why there is an margin/padding betwenn the articles:
My html:
<section id="home">
<article>
<h1>Übersicht</h1>
</article>
<article>
<h1>Leute</h1>
</article>
<article>
<h1>Links</h1>
</article>
</section>
And my css:
section { width: 87%;
margin: 0px auto;
}
article {
width:33%;
font-family: 'Open Sans', sans-serif;
background-color:blue;
display: inline-block;
margin:0px;
padding: 0px;
}
Try to replace inline-block with block and use float:left Please see this fiddle
JSFIDDLE EXAMPLE
There is whitespace between the display:inlin-block elements. Just remove them, example:
<section id="home">
<article><h1>Übersicht</h1></article><!--
--><article><h1>Leute</h1></article><!--
--><article><h1>Links</h1></article>
</section>
Or:
<section id="home">
<article><h1>Übersicht</h1></article><article><h1>Leute</h1></article><article><h1>Links</h1></article>
</section>
JSFiddle
Or adding font-size:0; to the parent container, example.
The spaces is added by your browser automaticly.
A widly accepted fix for this is by adding font-size:0 to the parent container and then a reasonable font size to the child elements
In your case you would do this:
section {
font-size: 0; //Must be zero
}
article {
font-size: 10px; //can be anything you want
width:33%;
font-family: 'Open Sans', sans-serif;
background-color:blue;
display: inline-block;
margin:0px;
padding: 0px;
}
Any two inline or inline-block elements are rendered with a white space between them, even if you have several spaces/new lines separating them in the markup.
For example, these 3 divs, will all render hello world:
<div>hello world</div>
<div>hello
world</div>
<div>
hello
world
</div>
This happens because the text nodes are inline.
In your case, you need to make sure, the opening <article> is immediately after the previous closing </article>:
<section id="home">
<article>
<h1>Übersicht</h1>
</article><article>
<h1>Leute</h1>
</article><article>
<h1>Links</h1>
</article>
</section>
jsFiddle
Taking the above example, here you don't want hello world, you want helloworld, so just remove any spaces between these 2 words in the markup.
Display inline block is exactly what it is. An inline element with block properties. So that being said if you have a white space / line break between the elements it will add a gap.
I suggest using display: block and float: left in this case. This method also adds support for older browsers. If you prefer to use inline-block, remove the white space so that the end tag and beginning tag of the elements are directly next to each other.
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
I was wondering if I could seamlessly add a link to justified text. I would like for the link to be justified within the text and keep its position. The desired output will look like one paragraph. I have tried two methods thus far.
one
The html :
<div>
<p>This is a chunk of text. This is a chunkof text. This is a chunk of text.</p>
This is a link.
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
css :
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
}
p, a {
position: relative;
float: left;
text-align: justify;
display: inline;
}
the result is :
a chunk of text, a line break, the link, a line break, then the last chunk of text.
I would like to seamlessly add the link to the justified text. is that possible with just css?
two
When I put the link in the paragraph, it seems to randomly insert it near the actual location between text nodes. Could be treating the link as one word?
html :
<div>
<p>This is a chunk of text. This is a chunkof text. link-> This is a link.<-link This is a chunk of text.</p>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
In the output the link does not line up with "link-> <-link"
I suppose if this is the better of the two options I would just like to know why the link won't line up with it's position alliterative to the text nodes. "link->", "<-link"
Your code is working as it should be for inline but in your css you have
div {
width: 200px;
}
and all other elements are inside that div so it's your div that causing the line breaks, if you set the width of your div more then it'll be displayed in one line, which is (inline) working right now.
Example.
Update: Also you may try this
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
text-align: justify;
}
p{
display: inline;
}
a{
float:left;
}
Like Heera mentioned.
div {
width: 200px;
}
Is causing the line breaks as that is probably not wide enough. You will need to increase that.
If you are wanting the link to line up with the text than do it like this.
<div>
<p>This is a chunk of text. This is a chunkof text. This is a chunk of text.
This is a link.</p>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
Other wise you would have to add a class for both the link and paragraph tag to make them float and display inline. It would be simpler to just do the above method.
If you rather do it the other way than this should work
<div>
<p class="firstP">This is a chunk of text. This is a chunkof text. This is a chunk of text.</p>
This is a link.
<div class="breaker"></div>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
p.firstP {
float: left;
display: inline-block;
}
div a {
float: left;
display: inline-block;
}
.breaker {
clear: both;
}
How to achieve same output without <br>?
<p>hello <br> How are you </p>
output:
hello
How are you
You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example:
p {
white-space: pre;
}
<p>hello
How are you</p>
Note for IE that this only works in IE8+.
Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.
I suggest using spans that you will then display as blocks (just like a <div> actually).
p span {
display: block;
}
<p><span>hello</span><span>How are you</span></p>
Use <br/> as normal, but hide it with display: none when you don't want it.
I would expect most people finding this question want to use css / responsive design to decide whether or not a line-break appears in a specific place. (and don't have anything personal against <br/>)
While not immediately obvious, you can actually apply display:none to a <br/> tag to hide it, which enables the use of media queries in tandem with semantic BR tags.
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
#media screen and (min-width: 20em) {
br {
display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
}
This is useful in responsive design where you need to force text into two lines at an exact break.
jsfiddle example
There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a <p> tag it is pretty easy to get whatever one wants.
For preserving line breaks but not white spaces use pre-line (not pre) like in:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */
SOURCE: W3 Schools
The "\a" command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.
In a blockquote, the example below displays both the title and the source link and separate the two with a carriage return ("\a"):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
In the CSS use the code
p {
white-space: pre-line;
}
With this CSS every enter inside the P tag will be a break-line at the HTML.
Building on what has been said before, this is a pure CSS solution that works.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
To make an element have a line break afterwards, assign it:
display:block;
Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.
But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
OR
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
source: https://stackoverflow.com/a/36191199/2377343
Here's a bad solution to a bad question, but one that literally meets the brief:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
Use overflow-wrap: break-word; like:
.yourelement{
overflow-wrap: break-word;
}
Maybe someone will have the same issue as me:
I was in a element with display: flex so I had to use flex-direction: column.
For a List of Links
The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.
Here's an example, assuming a table of contents:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
Item A1 Item A2
Item B1 Item B2
</span>
And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older IE.
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
Item A1<br/> Item A2<br/>
Item B1<br/> Item B2<br/>
</span>
Note the advantages of the above solutions:
No matter the whitespace in the HTML, the output is the same (vs. pre)
No extra padding is added to the elements (see NickG's display:block comments)
You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change
No float or clear styles affecting surrounding content
The style is separate from the content (vs. <br/>, or pre with hard-coded breaks)
This can also work for loose links using a.toc:after and <a class="toc">
You can add multiple breaks and even prefix/suffix text
Setting a br tag to display: none is helpful, but then you can end up with WordsRunTogether. I've found it more helpful to instead replace it with a space character, like so:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
#media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
I like very simple solutions, here is one more:
<p>hello <span>How are you</span></p>
and CSS:
p {
display: flex;
flex-direction: column;
}
How about<pre> tag?
source: http://www.w3schools.com/tags/tag_pre.asp
The code can be:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS would be:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
You need to declare the content within <span class="class_name"></span>. After it the line will be break.
\A means line feed character.
.class_name::after {
content: "\A";
white-space: pre;
}
You can add a lot of padding and force text to be split to new line, for example
p {
padding-right: 50%;
}
Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.
Using white-space will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead
it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me 😆
Example
#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
white-space: pre-line;
background-color: green;
}
.flex{
display: flex;
}
#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> white-space: pre-line;</h1>
<div class='flex'>
<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="container">
<h5>No specaes (not working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
<h1> word-wrap: break-word;</h1>
<div class='flex'>
<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<div id="wrap">
<h5>No specaes (working )</h5> <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>
On CSS-tricks, Chris Coyier have tested lots of options and the final and pretty neat one was using display:table, Each one have their own problems which you will find out when you use background-color on the span!
body {
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 24px;
line-height: 1.6;
background: #eee;
padding: 20px;
margin: 5px 0 25px 0;
text-align:center;
}
h1 span {
color: white;
font-weight: 900;
}
h1 span {
background: black;
padding: 1px 8px;
display: table;
margin:auto;
}
<h1 class="one">
Break right after this
<span>
and before this
</span>
</h1>
Here You can see all other options on codepen:
Injecting a Line Break
A modern and simple solution could be setting the width like that:
width: min-content;
This CSS rule is mostly useful for text content, but not only:
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p {
margin: 20px;
color: #222;
font-family:'Century Gothic', sans-serif;
border: 2px dotted grey;
padding: 3px;
}
.max {
width: max-content;
}
.min {
width: min-content;
}
<!DOCTYPE html>
<html lang="en">
<head />
<body>
<p class="max"> Max width available </p>
<p class="min"> Min width available </p>
</body>
</html>
Both Vincent Robert and Joey Adams answers are valid. If you don't want, however, change the markup, you can just insert a <br /> using javascript.
There is no way to do it in CSS without changing the markup.
In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:
clear:both;
In case this helps someone...
You could do this:
<p>This is an <a class="on-new-line">inline link</a>?</p>
With this css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}
Using instead of spaces will prevent a break.
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint <br /> in your text, then giving it a class like <br class="hidebreak"/> then using media query right above the size you want it to break to hide the <br /> so it breaks at a specific width but stays inline above that width.
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
#media (min-width: 767px) {
br.hidebreak {display:none;}
}
https://jsfiddle.net/517Design/o71yw5vd/
This works in Chrome:
p::after {
content: "-";
color: transparent;
display: block;
}
I want space between my <p>content</p> tags. Not before and not after <p> tags. For example, my code is:
<div>
<h1>A headline</h1>
<p>Some text</p>
<p>Some text</p>
</div>
Something
I don't want space between h1 and p which is done with zero margin on h1. But I don't want space after the last <p> tag. Is this possible without :last-child or some JavaScript/jQuery?
I can't set class="last" on the last tag because it is a CMS system.
p + p {
margin-top: 1.5em;
}
(Although this requires a browser with better support for CSS than IE6.)
If you're not required to support Internet Explorer 6 (IE6) you can use:
div, h1, p { margin: 0; }
p + p { margin-top: 12px; }
If you need to support IE6, this is a dirty hack but it works without JavaScript:
div, h1, p { margin: 0; }
h1 { margin-bottom: -12px; }
p { margin-top: 12px; }
The disadvantage of this method is that you can't simply use, say, 1em for the balancing margins as they have different font sizes. You can either manually adjust as required or use pixel widths.
Set a default bottom-margin to p, then give the last tag a class with no bottom-margin.
<div>
<h1>A headline</h1>
<p>Some text</p>
<div class="paragraph-space"></div>
<p>Some text</p>
</div>
?
<div>
<h1>A headline</h1>
<p>Some text</p>
<p style="margin-bottom: 0;">Some text</p>
</div>
If you want to make it more browser compatible, you could also use:
p { margin-top: 24px; }
h1 { margin-bottom: -24px; } /* Play with this value as necessary */
Negative margins will pull elements toward them. It's messier than I like, but when you are at the mercy of CMS generated code with no way to add classes, you have to be creative.