CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

DIsplaying paragraphs in html without having to use BR tags

This is just a simple question really. Do I need to put br tags in my HTML to get paragraphs to be separated correctly with a line space between them?

<p>
This is just a test example.

This is a new paragraph.

This is a third paragraph.
</p>

However in my website it removes all the paragraph line breaks. To get the breaks in I have to insert two line breaks into my code to get it to display.

<p>
This is just a test example.
<br /><br />
This is a new paragraph.
<br /><br />
This is a third paragraph.
</p>

Is there any way around having to insert <br>'s without using the pre tag, which seems to force the formatting of the text / font.

Upvotes: 1

Views: 2604

Answers (6)

Josh Crozier
Josh Crozier

Reputation: 240938

Aside from using the <pre> tag, you could use white-space: pre in order for the line breaks to be respected.

p {
    white-space: pre;
    word-break: break-word;
}
<p>This is just a test example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien arcu, laoreet eget lobortis nec, volutpat in dui. Pellentesque luctus nibh feugiat, ultrices ex ac, porttitor mi. Vivamus vestibulum risus eu arcu tristique, quis blandit libero lacinia. Cras iaculis nec tortor sed consequat. Integer ornare pellentesque orci. Etiam malesuada imperdiet augue non elementum.

This is a third paragraph.
</p>

Upvotes: 4

michal
michal

Reputation: 236

<br>is a line break. That means it moves the text to the next line. If you want a space, you will use 2 <br>s.

Without using <pre> there are a few ways you can insert the breaks you want

CSS:

p {white-space: pre;}

HTML

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

Div elements also work similarily.

Upvotes: 1

Domino
Domino

Reputation: 6768

The way HTML is parsed, all spaces or newlines are turned into a single space. Even this will only show one space between both words:

<p>This
                       example</p>

<pre> tags are just paragraphs with default CSS set to them so they have a monotype font and the CSS property white-space: pre;. I wouldn't recommend using this however, HTML text was meant to be divided with <p> tags.

Upvotes: 1

Caio Felipe Pereira
Caio Felipe Pereira

Reputation: 835

The <p> tag stands for 'Paragraph', so try wrapping each paragraph in one of them. See this pen.

Upvotes: 4

Kirk Powell
Kirk Powell

Reputation: 910

<br /> is like a newline character. It is not visible to the user. Other than multiple <br /> tags, and <pre></pre> tags, you could write your text as this:

<p>This is just a test example.</p>
<p>This is a new paragraph.</p>
<p>This is a third paragraph.</p>

Upvotes: 3

Angelica Marie
Angelica Marie

Reputation: 35

make each paragraph it's own tag. 

<p>This is just a test example.</p>
<p>This is a new paragraph.</p>
<p>This is a third paragraph.</p>

And then you can control the margin or padding of the p tag through css to control the spacing above and below each paragraph.

Upvotes: 3

Related Questions