How to give line-break from css, without using <br />?

Question

output:

hello
How are you

code:

<p>hello <br /> How are you </p>

How to achieve same output without <br />?

Answer 1

You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example:

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

Note that this doesn't work in IE6 or IE7. I don't know about IE8.

Answer 2

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

HTML:

<p><span>hello></span><span>How are you</span></p>

CSS:

p span 
{
    display: block;
}

Answer 3

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.

Answer 4

Don't. If you want a hard line break, use one.

Answer 5

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.

Answer 6

Here's a bad solution to a bad question, but one that literally meets the brief.

    <style>
      p { width : 12ex; }
      p:before { content: "."; float:right; padding-left:6ex; visibility:hidden; }
    </style>