HTML 和 CSS 正确地跟随段落中的新行答案

【问题标题】：HTML 和 CSS 正确地跟随段落中的新行
【发布时间】：2018-08-14 04:10:50
【问题描述】：

我想让它正确显示我的段落。

段落示例：

Lorem ipsum dolor sit amet，consectetur adipiscing elit。多内克 est nec interdum tincidunt。整数 nec aliquet urna，一种 tincidunt 猫。 Nunc mi quam、convallis vitae pharetra quis、dapibus 等。 Duis et elit et turpis volutpat interdum ut et magna。 Morbi suscipit a dolor 坐在amet egestas。 Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu 舌叶。 Class aptent taciti socialsqu ad litora torquent per conubia nostra, per inceptos himenaeos。

Donec vehicula laoreet cursus。 Vivamus in posuere lorem, quis 塞莱里斯克英里Quisque ut massa aliquam, sollicitudin sem ac, maximus turpis。 Quisque eu ante volutpat, dapibus justo sit amet, sodales 尼布。 Pellentesque bibendum elit id turpis accumsan, ac rutrum est 威尼斯人。 Fusce iaculis tortor ut sem interdum, id dignissim augue 拉西尼亚。 Morbi elementum eleifendtellus sed mattis。随之而来的南 arcu, ac aliquam sem.

我的代码：

<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 中的问题之前，它会溢出，所以我添加了断词。现在我的另一个问题是我不知道如何使它遵循段落中存在的段落之间的换行符。

当它确实显示时，它会删除换行符，所有内容都呈现如下：

Lorem ipsum dolor sit amet，consectetur adipiscing elit。多内克 est nec interdum tincidunt。整数 nec aliquet urna，一种 tincidunt 猫。 Nunc mi quam、convallis vitae pharetra quis、dapibus 等。 Duis et elit et turpis volutpat interdum ut et magna。 Morbi suscipit a dolor 坐在amet egestas。 Nunc aliquam, eros molestie efficitur faucibus, orci diam sollicitudin odio, ut auctor ipsum ipsum eu 舌叶。 Class aptent taciti socialsqu ad litora torquent per conubia nostra，每 inceptos himenaeos。 多内克 vehicula laoreet cursus。维瓦姆斯在 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 塞德马蒂斯。 Nam in consequat arcu, ac aliquam sem.

请注意，现在第二段连接到第一段的最后一个文本。

我该如何解决这个问题？因为我更喜欢后端，所以我不太擅长 CSS。

【问题讨论】：

你需要把每个paragraph放在<p>标签中，
white-space: pre-wrap 将保留原始空格。
在我遇到段落不能包含在我的 div 中的问题之前，它会溢出，所以我在正常操作中添加了断词，这不应该发生。请为您的问题创建一个Minimal, Complete, and Verifiable example
@N.Ivanov 我可以删除 PHP 代码，只需将段落放在 DIV 之间，它仍然会显示相同的结果。
@Liam 整个内容都是输入的，我们不希望用户知道 HTML。还有其他方法吗？

标签： html css

【解决方案1】：

你要放流行标签

。例如：

这是第一段

这是第二段

注意！：如果你在两个段落之间有一个很大的空格，你可以添加很多标签。

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.

【讨论】：

【解决方案2】：

要保留您的 html 文档空白（新行、多行等），请尝试使用white-space:pre-line;，如下所示。此外，如果您想将制表符保留在行的前面，那么您应该使用white-space:pre-wrap。

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

【讨论】：

前置行是做什么的？
你应该给出修复的解释。
行前保留您在 html 文档中键入的实际空格。
@webBer 也添加了解释。
@Hanif 始终以提问者能够很好理解的方式发布您的答案。只是一个提示.. :)

【解决方案3】：

正如 Halif 所说，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>

【讨论】：