How to line-break from css, without using



How are you


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

How to achieve same output without <br>?

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>

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.

   The quick brown fox<br />
   jumps over the lazy dog

 @media screen and (min-width: 20em) 
       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.


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:

 p {
     white-space: pre-line; /* collapse WS, preserve LB */

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


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 {

Building on what has been said before, this is a pure CSS solution that works.

  span {
    display: inline;
  span:before {
    content: "\a ";
    white-space: pre;
  First line of text. <span>Next line.</span>

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.