How can I use CSS to insert a line break after but not before an element?

Question

For example:

HTML:

The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.

I want this to display:

The quick brown fox {BREAK}

jumps over the lazy dog.

I looked into the display property, but display:inline; doesn't break anywhere and display:block puts breaks on both sides.

I also looked into the :after pseudo-class, but .break:after{content:"\000A";} ends up rendering as a space, rather than a line feed.

http://jsfiddle.net/bMKrc/ Like this? You could also in that instance, just use divs. — Jacques ジャック, Sep 30 '13 at 17:09
@JukkaK.Korpela I want it to be customizable whether there is a line break or not. — Matt, Sep 30 '13 at 17:18
SLaks solution is good, but you could just make the `span.break` display block. It's easier, less code, and cross browser compatible.http://jsfiddle.net/bMKrc/1/ — Jacques ジャック, Sep 30 '13 at 17:31
possible duplicate of [Line break (like
) using only css](http://stackoverflow.com/questions/10933837/line-break-like-br-using-only-css) — user, Dec 03 '14 at 22:34

score 31 · Accepted Answer · answered Sep 30 '13 at 17:09

31

By default, HTML elements ignore whitespace.
You need to change that:

.break:after {
    content:"\000A";
    white-space: pre;
}

answered Sep 30 '13 at 17:09

SLaks

Thanks, that works! I will accept as soon as the 15 minutes is up. – Matt Sep 30 '13 at 17:14
in my case it did not work unless i put text in it why?! – shareef Jul 28 '15 at 08:09
@shareef: What are you talking about? What happened? – SLaks Jul 28 '15 at 13:49
@Slaks Could you explain what this is doing please? I've just come across the answer, and it works, but I want to understand what it's doing. (Please and thank you :)) – TolMera Feb 22 '16 at 09:24

Jacques ジャック · Answer 2 · 2013-09-30T20:10:48.887

3

html:

The quick brown fox <span class="break"></span> jumps over the lazy dog.

CSS:

.break{
    display:block;
}

And that's all you need. display:block may cause it to break on both sides, but it does not cause there to be an extra line. View my fiddle.

edited Sep 30 '13 at 20:10

answered Sep 30 '13 at 17:32

@Matt Just because the OP says something does not mean it's true. You achieve the desired result with display block. Check out my fiddle if you don't believe me. – Jacques ジャック Sep 30 '13 at 20:09
In case it was confusing "{BREAK}" is still supposed to be part of the text. – Matt Sep 30 '13 at 20:41
1

Oh, that does not make much sense, but it's not my project. I thought he was showing where to put the break. But that does not warrant your being rude. – Jacques ジャック Sep 30 '13 at 20:53
Ok, I appologize if I came off as rude. The reason it does not make much sense is because I only gave an illustrative example of my problem and not my actual problem. – Matt Sep 30 '13 at 21:11
The jsfiddle.net makes it very clear. I tried many many ways to put a line break between an img and an Angular {{ }} binding that are both inside a button, and this is the only thing that works. And its so self explanatory in the code, especially if you call the class lineBreak. – Mike_Laird Dec 24 '14 at 18:46
1

..soo, why don't use
then? – Max Yari Aug 31 '15 at 16:07

2 Answers2