How to cause each break line in HTML to appear as break line in the browser?

Question

Having - HTML and its CSS -

HTML -

<html>
<head>
    <link href="css/breakLineInBrowser.css" rel="stylesheet">
</head>
<body>
    <p>
     Line 1. 
     Line 2.
     Line 3.
    </p>
</body>
</html>

CSS -

p {

}

DEMO

In the browser it appears as -

Line 1. Line 2. Line 3.

Which CSS property have I add into the p {} in order to get it display as -

Line 1. 
Line 2.
Line 3.

?

(I don't look for solution with </br> in the HTML)

score 2 · Accepted Answer · answered May 11 '14 at 12:23

2

You can use white-space property of css.

white-space: pre-line;

answered May 11 '14 at 12:23

Rashmin Javiya

5,173
3
27
49

score 1 · Answer 2 · answered May 11 '14 at 13:07

I think you have three options.

Using <pre> HTML tag.

<p>
 <pre> 
  Line 1. 
  Line 2. 
  Line 3. 
 </pre> 
</p>

Using <br\> HTML tag

<p> 
 Line 1.<br/> 
 Line 2.<br/> 
 Line 3.<br/> 
</p>

Or using css styles

<p style="white-space: pre-line;">
line1
line2
line3
</p>

Anyway please read other answers too.

score 0 · Answer 3 · answered May 11 '14 at 12:24

0

Why don't you use the paragraph?

<p>Line 1.</p>
<p>Line 2.</p>
<p>Line 3.</p>

answered May 11 '14 at 12:24

Kets

438
2
8
24

score 0 · Answer 4 · answered May 11 '14 at 12:25

0

What you search is the pre-Element. It's css counterpart is

pre{ white-space: pre ; display: block; unicode-bidi: embed }

(As seen here)

answered May 11 '14 at 12:25

Sebb

871
6
16

How to cause each break line in HTML to appear as break line in the browser?

4 Answers4