job.answiz.com

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.

http://jsfiddle.net/nNbD3/1/

  • 0
Reply Report

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.

  • 0
Reply Report

Impossible with the same HTML structure, you must have something to distinguish between Helloand 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;
}
  • 0
Reply Report