[html] How to line-break from css, without using <br />?

output:

hello
How are you

code:

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

How to achieve same output without <br>?

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>

You can add a lot of padding and force text to be split to new line, for example

p{
    padding-right: 50%;
}

Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.

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.

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

OR

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

source: https://stackoverflow.com/a/36191199/2377343

In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:

clear:both;

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

In case this helps someone...

You could do this:

<p>This is an <a class="on-new-line">inline link</a>?</p>

With this css:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

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

Use overflow-wrap: break-word; like :

.yourelement{
overflow-wrap: break-word;
}

You need to declare the content within <span class="class_name"></span>. After it the line will be break.

\A means line feed character.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Maybe someone will have the same issue as me:

I was in a element with display: flex so I had to use flex-direction: column.

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

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

p {_x000D_
  white-space: pre;_x000D_
}

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

Note for IE that this only works in IE8+.

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

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

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

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.

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.

The code can be

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS would be

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

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>

How about<pre> tag?

source: http://www.w3schools.com/tags/tag_pre.asp

I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint <br /> in your text, then giving it a class like <br class="hidebreak"/> then using media query right above the size you want it to break to hide the <br /> so it breaks at a specific width but stays inline above that width.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

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

I like very simple solutions, here is the one more

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

and css

p {
 display: flex;
 flex-direction: column;
}

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.

jsfiddle example

This works in Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}