如何在换行时显示空间

时间:2013-01-25 12:22:35

标签: html css

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

<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”)看起来像任何其他字符,但每行的末尾没有空格。

5 个答案:

答案 0 :(得分:3)

您的答案可以在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格式中使用的所有标签。因此,您无法缩进<span>标记内的文字。

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

p { white-space:nowrap;}

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

也请查看:http://www.impressivewebs.com/css-white-space/