How to line-break from css, without using ?

Question

output:

hello
How are you

code:

hello 
 How are you 

Ho

Answer 1

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>

Answer 2

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">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</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">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><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

Answer 3

Using   instead of spaces will prevent a break.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Answer 4

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: ' ';}
}

Answer 5

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)
}

Answer 6

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.