How to line-break from css, without using ?

Question

output:

hello
How are you

code:

hello 
 How are you 

Ho

Answer 1

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

Answer 2

<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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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