white-space属性控制文本空白处理与换行行为。normal合并空白并换行;nowrap合并空白不换行;pre保留所有空白与换行;pre-wrap保留空白允许换行;pre-line合并空格保留换行。常配合word-break、overflow-wrap、text-overflow使用,适用于代码展示、用户输入等场景,提升排版灵活性。

CSS 的 white-space 属性用来控制元素内空白符(如空格、换行)的处理方式,以及文本是否自动换行。它对文本排版非常关键,特别是在需要保留格式或防止换行的场景中。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
常见 white-space 取值及效果
以下是常用的 white-space 值及其行为说明:white-space: normal
合并连续的空白符(空格、制表符、换行),并允许文本在容器边界处自动换行。这是默认值。
white-space: nowrap
合并空白符,但禁止文本换行,所有内容会在一行显示,超出容器也不会自动折行。
white-space: pre
保留所有空白符和换行符,功能类似 HTML 中的
标签。不会自动换行,除非文本中包含换行符。 <p><strong>white-space: pre-wrap</strong><br> 保留空白符和换行符,同时允许文本在必要时自动换行。适合展示代码或日志等需要保留格式的内容。</p> <p><strong>white-space: pre-line</strong><br> 合并空白符(多个空格视为一个),但保留文本中的换行符,并允许自动换行。适合处理用户输入的多行文本。</p> <h3>如何控制换行行为</h3> <font>根据实际需求选择合适的 white-space 值来控制换行:</font>
- 想让文本正常换行并忽略多余空格 → 使用 normal
- 希望文本不换行,强制一行显示 → 使用 nowrap
- 需要保留原始格式(如代码块)→ 使用 pre 或 pre-wrap
- 保留换行但压缩空格(如用户评论)→ 使用 pre-line
配合其他属性使用更灵活
white-space 常与以下属性搭配使用:-
word-break:控制单词内部是否断行,如中文常用
word-break: break-all - overflow-wrap(或 word-wrap):允许长单词换行,避免溢出容器
- text-overflow:配合 overflow: hidden 实现省略号效果(仅适用于 nowrap 场景)
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










