HTML和CSS正確地遵循段落中的新行

Question

我想這樣做，以便我的段落能夠正確顯示。

段落示例：

Lorem ipsum dolor坐下來，精致的adipistur elit。 Donec auctor est nec interdum tincidunt。 整數nec aliquet urna，一個tincidunt felis。 Nunc mi quam，convallis vitae pharetra quis，dapibus et est.Duis et elit et turpis volutpat interdum ut et magna。 Morbi讓一個玩家坐在一起。 Nunc aliquam，eros molestie efficitur faucibus，orci diam sollicitudin odio，ut auctor ipsum ipsum eu ligula。 類似於每個conubia nostra的taciti sociosqu ad litora torquent，per perosos himenaeos。

Donec vehicula laoreet cursus。 Vivamus在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。 在南瓜中，南瓜，阿里誇姆。

我的代碼：

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

在我遇到一個問題之前，段落不能包含在我的div中，它會溢出，所以我添加了break-word。 現在我的另一個問題是我不知道怎么做才能遵循段落中段落之間的換行符。

當它顯示時它會刪除換行符，所有內容都顯示如下：

Lorem ipsum dolor坐下來，精致的adipistur elit。 Donec auctor est nec interdum tincidunt。 整數nec aliquet urna，一個tincidunt felis。 Nunc mi quam，convallis vitae pharetra quis，dapibus et est.Duis et elit et turpis volutpat interdum ut et magna。 Morbi讓一個玩家坐在一起。 Nunc aliquam，eros molestie efficitur faucibus，orci diam sollicitudin odio，ut auctor ipsum ipsum eu ligula。 類似於每個conubia nostra的taciti sociosqu ad litora torquent，per perosos himenaeos。 Donec vehicula laoreet cursus。 Vivamus在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。 在南瓜中，南瓜，阿里誇姆。

請注意，現在第二段已連接到第一段的最后一個文本。

我怎么解決這個問題？ 我不喜歡CSS，因為我更喜歡后端。

Answer 1

正如哈利夫所說， white-space:pre-line; 會有所幫助，你可以在文本塊之間添加<br>到空格。 或者將<p>添加到每個文本塊。

 .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> 

Answer 2

保持你的html文檔的空格（新行，多行等），因為它試圖使用white-space:pre-line; 喜歡以下 此外，如果您想要將標簽空間保持在行的前面，那么您應該使用white-space:pre-wrap 。

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

Answer 3

你必須把流行的標簽

。 例如：

這是第一段

這是第二個paragraphe

注意！：如果你在兩個paragraphes之間有一個很大的空間，你可以添加很多標簽。

 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.