white-space属性控制文本空白处理与换行行为。normal合并空白并换行；nowrap合并空白不换行；pre保留所有空白与换行；pre-wrap保留空白允许换行；pre-line合并空格保留换行。常配合word-break、overflow-wrap、text-overflow使用，适用于代码展示、用户输入等场景，提升排版灵活性。
CSS 的 white-space 属性用来控制元素内空白符（如空格、换行）的处理方式，以及文本是否自动换行。它对文本排版非常关键，特别是在需要保留格式或防止换行的场景中。
稿定抠图
AI自动消除图片背景
76 查看详情
常见 white-space 取值及效果
以下是常用的 white-space 值及其行为说明：
white-space: normal
合并连续的空白符（空格、制表符、换行），并允许文本在容器边界处自动换行。这是默认值。
white-space: nowrap
合并空白符，但禁止文本换行，所有内容会在一行显示，超出容器也不会自动折行。
white-space: pre
保留所有空白符和换行符，功能类似 HTML 中的
标签。不会自动换行，除非文本中包含换行符。white-space: pre-wrap
保留空白符和换行符，同时允许文本在必要时自动换行。适合展示代码或日志等需要保留格式的内容。white-space: pre-line
合并空白符（多个空格视为一个），但保留文本中的换行符，并允许自动换行。适合处理用户输入的多行文本。如何控制换行行为
根据实际需求选择合适的 white-space 值来控制换行：想让文本正常换行并忽略多余空格 → 使用 normal 希望文本不换行，强制一行显示 → 使用 nowrap 需要保留原始格式（如代码块）→ 使用 pre 或 pre-wrap 保留换行但压缩空格（如用户评论）→ 使用 pre-line
配合其他属性使用更灵活
white-space 常与以下属性搭配使用：word-break：控制单词内部是否断行，如中文常用
word-break: break-alloverflow-wrap（或 word-wrap）：允许长单词换行，避免溢出容器 text-overflow：配合 overflow: hidden 实现省略号效果（仅适用于 nowrap 场景）基本上就这些。掌握 white-space 的不同取值，能精准控制文本的空白与换行行为，提升页面排版的灵活性和可读性。以上就是css white-space属性如何控制文本换行的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1025385.html
微信扫一扫 
支付宝扫一扫 
