1

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.

Improve this question
9
  • 2
    You need to put each paragraph in <p> tags, Commented Mar 6, 2018 at 10:25
  • 1
    white-space: pre-wrap will preserve whitespace from the original. Commented Mar 6, 2018 at 10:26
  • 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 Commented Mar 6, 2018 at 10:27
  • @N.Ivanov I can remove the PHP code and simply place the paragraph between the DIV and it will still display the same result. Commented Mar 6, 2018 at 10:28
  • @Liam the whole content is typed and we don't expect the users to know HTML. Any other way around this? Commented Mar 6, 2018 at 10:29

3 Answers 3

Reset to default
3

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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;}
Improve this answer

6 Comments

What does pre-line do?
You should give Explanation of the fix.
pre-line keep your actual whitespace as it is you typed in your html document.
@weBBer added explanation as well.
@Hanif Always post your answer in a way that the one who asked the question can understand it well. Just a tip.. :)
|
-2

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.