DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
CSS 的 white-space
属性控制如何处理应用于它的元素上的文本。假设您拥有如下所示的 HTML 代码
<div>
A bunch of words you see.
</div>
您已将 div 的样式设置为宽度为 100px。在合理的字体大小下,这对于文本来说太长了,无法容纳在 100px
内。在不进行任何操作的情况下,默认的 white-space
值为 normal
,文本将自动换行。请参见下面的示例,或在本地使用 演示 进行操作。
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}

如果要阻止文本换行,可以应用 white-space: nowrap;

请注意,在本文顶部的 HTML 代码示例中,实际上有两个换行符,一个在文本行之前,一个在文本行之后,这使得文本能够独立成行(在代码中)。当文本在浏览器中呈现时,这些换行符看起来像是被删除了。此外,第一字母之前的额外空格也被删除了。如果我们想强制浏览器显示这些换行符和额外的空白字符,我们可以使用 white-space: pre;

它被称为 pre
,因为其行为就像您将文本包装在 <pre></pre>
标记中一样(默认情况下,这些标记以这种方式处理空白和换行符)。空白字符将完全按照 HTML 中的格式保留,并且文本不会换行,直到代码中出现换行符为止。这在字面显示代码时特别有用,因为代码在美学上受益于某些格式(有时也绝对至关重要,例如在依赖于空白的语言中!)
也许您喜欢 pre
如何保留空白和换行符,但您需要文本换行,而不是可能超出其父容器。这就是 white-space: pre-wrap;
的用途。

最后,white-space: pre-line;
将在代码中换行的位置换行,但额外的空白字符仍会被删除。

有趣的是,最后的换行符不会被保留。根据 CSS 2.1 规范:“行在保留的换行符处换行,并在必要时填充行框。” 因此,这也许说得通。
这是一个表格,用于了解所有不同值的属性行为
换行符 | 空格和制表符 | 文本换行 | |
---|---|---|---|
normal | 折叠 | 折叠 | 换行 |
pre | 保留 | 保留 | 不换行 |
nowrap | 折叠 | 折叠 | 不换行 |
pre-wrap | 保留 | 保留 | 换行 |
pre-line | 保留 | 折叠 | 换行 |
在 CSS3 中,white-space
属性将完全按照该图表进行操作,并将属性映射到 text-space-collapse
和 text-wrap
。
更多信息
- CSS
white-space
属性 (DigitalOcean) - 如何使用 CSS 防止换行 (DigitalOcean)
- Mozilla 文档
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
8+ | 全部 | 全部 | 全部 | 全部 | 全部 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 |
Chris,你似乎在 IE 图片精灵中遇到剪裁问题。尝试增加宽度,因为它是所有图片中最宽的。
+1
很棒的内容,兄弟!
有空的时候更正一下错别字 :)
wefrgthyjuk
asdasdasdasdf
如果一个元素具有特定的宽度,并且它包含一个比框更宽的单词,该怎么办?除了添加一些 js 之外,有没有办法将单词换行以使用连字符适应框?
如果没有,这绝对应该在下一轮 css 中考虑……恕我直言
所以我找到了这个 - http://www.w3.org/TR/css3-text/#hyphens - 你能否解释一下?如果你有时间,也许还可以做一些浏览器兼容性测试?
谢谢!
有没有办法将文本设置为在单词前换行,而不是在中间使用连字符换行(除了手动插入换行符 <br>)?
@ Kevin - Chris 还有另一个资源涉及到这一点(但我想它没有解决我的问题):prevent-long-urls-from-breaking-out-of-container
谢谢 Tim!这很有用。
@Tim Osborn,SO 上有一些关于文本换行控制的有用答案,尤其是我的两个答案(;-),http://stackoverflow.com/a/6298738/736006 和 http://stackoverflow.com/a/6508168/736006。
@Chris(以及所有人!),除了这个之外,有没有更好的方法来完全丢弃空格:http://stackoverflow.com/a/2629446/736006
(谢谢,很棒的网站!)
(抱歉,忘记订阅了,看来没有评论就无法订阅。)
嗨,我正在尝试做一些非常基本的事情;我希望 Visual Studio 中的 xslt 代码看起来与生成的 pdf 上的一样,这样我就不必浪费时间进行“反复试验”,不必猜测在 VS 中对字段进行间距以使其对齐,例如
帐号:6319469991655135
余额:51.28 英镑
贷款支付:0.00 英镑
例如。这就是我想做到的 - 所以 xslt 中的空格是 pdf 上的空格
帐号:
余额:£
贷款支付:£
你能帮忙吗?
hhhhhhhhhhh
不错的文章。
请注意,我没有看到 pre-wrap 和 pre-line 在 IE 8.0x 中工作。
我切换到以下文档类型,希望这是问题所在。但是 pre-wrap 在其他浏览器中可以正常工作。
在你的文本中,有一句话说
但它应该说
谢谢,已修复。隐藏起来,因为它对这个评论线程不再重要了。
你能解释一下“区分 css 属性和元素”吗?
一件重要的事情。W3C 验证器将white-space: nowrap;标记为 CSS3 中不存在,并将其报告为错误。
非常感谢你用简单的语言总结它。
好文档。
font-family: monospace;
white-space: pre;
使用以上方法,我能够在 Firefox 中保留 pre。但在 IE9 和 IE8 中,它变成了单行。它似乎没有保留换行符。有什么办法解决这个问题吗?
顺便说一句,很棒的文档!
我在 IE 中遇到了同样的问题。white-space: pre-wrap 在 IE9 中不起作用。不确定其他 IE 版本是否也如此。在 Chrome 中工作正常。有什么办法让它在 IE 中工作???
使用 white-space:Pre-line 时,会在文本区域顶部添加一个额外的换行符。有没有办法删除添加的额外行?
你可能现在已经解决了这个问题,但如果其他人来到这里——那是因为你有两个换行符。根据你的 IDE 的自动换行设置,可能很难分辨手动换行符在哪里。行之间不应该有任何额外的换行符,否则 CSS 会包含它。
例如
适当的
使用 pre-line
它将换行
每一行。
对比
可能不需要的
使用 pre-line 会为用户创建一个视觉上的区别
但会使 CSS 困惑。
我非常喜欢这个网站。我似乎每周都会来这里三次,找到我遇到的问题的答案。谢谢,并继续努力。
大家好,
我不太懂技术,所以请帮忙。我正在使用 wordpress。当我在一句句子的句号后按两次空格键时,段落中的第二行或(第 n 行)会缩进,并且没有与左侧对齐。这仅在我按两次空格键(在上一句之后)时发生,在上一行的末尾,文本被迫换行到第二行。我的 CSS 表格中是否缺少什么?
还有其他人遇到 white-space: pre 问题吗?
当我在 Chrome 34.0.1847.137 中的文本区域上使用它时,文本仍然换行……即使在“文本换行”下说它不应该换行。
新行、空格、制表符等都按预期工作……但长行仍然换行 :(
这可能是仅针对文本区域的特定行为吗?
干得好,非常棒的技巧。墨西哥问好。
谢谢!你让我的一天变得美好!
天哪,我无法告诉你我多少次在网上寻找解决方案或半成品解决方案却找不到答案,直到我来到css-tricks。感谢你在那些时候一直都在。继续努力。
有人可以解释我看到的行为吗?我按照这篇文章的步骤操作,并且理解HTML中有两个换行符,以及为什么使用
white-space: pre
的示例在文本前后都显示一个空行。但是,当我尝试这样做时,我只看到文本上方有一个空行。这是我的示例:https://jsfiddle.net/2wm7v5pc/
抱歉,我无法编辑。我最初也在codepen上尝试过:http://codepen.io/adam-beck/pen/oYyEOd。出于某种原因,即使HTML中存在换行符,它仍然不会添加空行。
测试
非常感谢!这正是我想要的。起初我尝试使用
标签来包含从我的SQL数据库中检索到的文本。然后我遇到了一个新问题,因为文本没有使用正确的字体进行格式化。然后我尝试使用内联样式
style="white-space: pre"
。然后我遇到了一个新问题,因为文本不会换行。最后,我找到了你的博客并尝试了style="white-space: pre-wrap"
,它拯救了我的生命。感谢你的简单教程/解释。我有一个很长的句子,它可以正常换行,但它会对单词进行连字符处理;我该如何防止这种情况发生?
这些似乎在表格单元格内不起作用。
我有一些数据包含“/”和单词之间的“&” (并非所有数据,只是一些元素)。当信息放在表格单元格(th或td)中时,没有任何其他格式,它会直接从单元格中读取出来(遮挡其他信息,并且看起来很糟糕)。
当我应用
word-break: break-all
时,它会在空间不足时断开,但不是在逻辑点断开Open/P
ath
我在“/”前后添加了一个空格,但它似乎将所有内容都视为空格,并将其缩减为“/”。(它看起来与上面相同。)
如果我使用
white-space: pre-wrap
,它只会将其恢复到溢出单元格并看起来很糟糕的状态。最重要的是,它甚至没有保留空格!我错过了什么?