html - 如何在换行符上显示空格

Question

在我的标签中，我有一些文字，并且在很多行上都断了。

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

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

编辑：

如果你运行这个：

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

您可以看到，单词之间的空格 (" ") 看起来像任何其他字符，但每行的末尾没有空格。

score 3 · Accepted Answer

您的答案可以在 csswhite-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 中，但这是给定的。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

这是一篇很好的文章，提供了一些很好的解释： http: //www.newbiewebsitedesign.com/html-line-break-tag-cod

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

p { white-space:nowrap;}

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

5 回答 5