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.