Advertisement
Advertisement


How to line-break from css, without using
?


Question

output:

hello
How are you

code:

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

How to achieve same output without <br>?

2020/04/20
1
404
4/20/2020 6:29:03 PM

Accepted Answer

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>

2020/04/20
390
4/20/2020 6:32:14 PM


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/

2018/09/24

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

2014/03/02

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)
}
2016/08/11

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>
2014/11/12

At the CSS use the code

p {
    white-space: pre-line;
}

With this code css every enter inside the P tag will be a break-line at the html.

2014/07/22

Source: https://stackoverflow.com/questions/2703601
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]