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

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

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

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

Use overflow-wrap: break-word; like:

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

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.

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.
, or pre with hard-coded breaks)

This can also work for loose links using a.toc:after and

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

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

I like very simple solutions, here is one more:

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

and CSS:

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

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

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.

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.

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;

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

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>

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/

This works in Chrome:

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

Using white-space will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead

it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me 😆

Example

#container { width: 40%; background-color: grey; overflow:hidden; margin:10px; } #container p{ white-space: pre-line; background-color: green; } .flex{ display: flex; } #wrap { width: 30%; background-color: grey; overflow:hidden; margin:10px; } #wrap p{ word-wrap: break-word; background-color: green; }

white-space: pre-line;

word-wrap: break-word;

On CSS-tricks, Chris Coyier have tested lots of options and the final and pretty neat one was using display:table, Each one have their own problems which you will find out when you use background-color on the span!

body { padding: 20px; font-family: 'Open Sans', sans-serif; } h1 { font-weight: 300; font-size: 24px; line-height: 1.6; background: #eee; padding: 20px; margin: 5px 0 25px 0; text-align:center; } h1 span { color: white; font-weight: 900; } h1 span { background: black; padding: 1px 8px; display: table; margin:auto; }

Break right after this and before this

Here You can see all other options on codepen:

Injecting a Line Break