Question

在我的标签中，我有一些文字，而且它在许多行上都被破坏了。

<p>
some really long text broken in many places...
</p>

正常行为不是在换行符上显示空格字符，但在我的应用程序中我需要显示它，是否可能以任何方式？

修改

如果您运行this：

<p style="width:100px;">
    <span style="background-color: #008000">
        some long text bla bla bla bla bla bla bla
    </span>
</p>

你可以看到，单词之间的空格（“＆amp;＃32”）看起来像任何其他字符，但每行的末尾没有空格。

Answer 1

您的答案可以在css white-space属性中找到。这应该是你的HTML：

<p style="width:100px;">
  <span style="background:#008000;">some long text bla bla bla bla bla bla bla</span>
</p>

你的CSS应该是：

span {
  white-space: pre-wrap;
}

white-space:pre-wrap;的一个问题是，它还包括您可能在HTML格式中使用的所有标签。因此，您无法缩进标记内的文字。

看看我制作的这个小提琴：jsfiddle.net/jWbgW/

当然，您应该将所有样式定义放在css中，但这是给定的。

Answer 2

空格字符实际上并未显示在一行的末尾。如果在white-space: pre元素上设置span，则其内容将按原样显示，从而将分割保留为行以及多行或行尾空格。要在显示的行的末尾只有一些单独的空格（在它们占据空间并获得背景颜色的意义上），您可以使用不间断空格，可表示为&nsbsp;。

但是如果你想像往常一样包装文字，那么恐怕没有简单的方法可以让浏览器在行的末尾附加这样一个“可见空间”。

Answer 3

要在不同段落部分之间的HTML中添加换行符，您可以在标记中包装每个部分，使用 或使用CSS padding-bottom属性。当你使用这些时，实际上取决于具体情况。

Answer 4

您可以将 用于CSS中的新行或边距/填充。

<p>
some really long text broken in many places...
<br />
</p>

Answer 5

p { white-space:nowrap;}

<p>This text will be not broken on many lines...</p>