HTML and CSS to follow new lines in paragraph properly

1
votes

I want to make it so that my paragraph will be displayed properly.

Paragraph example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan, ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.

My code:

<div class="description pa10" style="word-wrap: break-word;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan, ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.</div>

Before I encountered a problem where the paragraph cannot be contained inside my div it overflows so I added break-word. Now my other problem is that I don't know how to make it so to follow the line breaks in between the paragraph that is present in the paragraph.

When it does display it removes the line-break and everything is presented like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan, ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.

Notice that it now that the second paragraph is connected to the last text of the first paragraph.

How can I solve this? I'm not that good with CSS since I prefer backend.

3
htmlcss
You need to put each paragraph in <p> tags, – Liam
white-space: pre-wrap will preserve whitespace from the original. – Niet the Dark Absol
Before I encountered a problem where the paragraph cannot be contained inside my div it overflows so I added break-word in normal operation this shouldn't happen. Please create a Minimal, Complete, and Verifiable example of your problem – Liam
@N.Ivanov I can remove the PHP code and simply place the paragraph between the DIV and it will still display the same result. – magicianiam
@Liam the whole content is typed and we don't expect the users to know HTML. Any other way around this? – magicianiam

3 Answers

2
votes

To keep your html document white spaces (new line, multi line etc) as it is try to use white-space:pre-line; like following. Also if you want to keep the tab space front of lines then you should use white-space:pre-wrap.

.description { white-space:pre-line;}
3
votes

As say Halif, white-space:pre-line; will help, and you can add <br> to space between text block. Or add <p> to each text block. 

.description { white-space:pre-line;}
<h3> First variant with br and  white-space </h3>
<div class="description pa10" style="word-wrap: break-word;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et<br>
  magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
  Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan,<br>
  ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.
</div>

<h3> Secont variant with p </h3>
<div style="word-wrap: break-word;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor est nec interdum tincidunt. Integer nec aliquet urna, a tincidunt felis. Nunc mi quam, convallis vitae pharetra quis, dapibus et est. Duis et elit et turpis volutpat interdum ut et</p>
  <p>magna. Morbi suscipit a dolor sit amet egestas. Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Donec vehicula laoreet cursus. Vivamus in posuere lorem, quis scelerisque mi. Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis. Quisque eu ante volutpat, dapibus justo sit amet, sodales nibh. Pellentesque bibendum elit id turpis accumsan,</p>
  <p>ac rutrum est venenatis. Fusce iaculis tortor ut sem interdum, id dignissim augue lacinia. Morbi elementum eleifend tellus sed mattis. Nam in consequat arcu, ac aliquam sem.</p>
</div>
-2
votes

You have to put the popular tag

. Ex:

this is the first paragraph

this is a second paragraphe

Notice!:if you went to have a big espace between the two paragraphes you can add a lot of tags.

You have to put the popular tag <p>.
Example:
<body>
  <p>this is the first paragraph</p></br>
     <p>this is a second paragraphe</p>
</body>
    
Notice!:if you went to have a big espace between the two paragraphes you can add a lot of </br>tags.