CSS文字溢出与换行控制_white-space word-wrap word-break应用

掌握white-space、word-wrap和word-break属性可解决文本溢出问题：white-space控制空白符和换行，常用normal、nowrap和pre-wrap；word-wrap（overflow-wrap）用于长单词断行，break-word防止溢出；word-break定义字符间断行规则，break-all适用于表格防溢出；结合使用可实现单行省略、多行安全换行及中英文混合布局，提升页面美观性与健壮性。

在网页开发中，文本的换行与溢出处理是常见需求。当内容过长时，若不加以控制，容易破坏布局或影响可读性。CSS 提供了多个属性来精细化控制文字的换行行为，主要包括 white-space、word-wrap（overflow-wrap）和 word-break。合理使用这些属性，可以有效解决文本溢出问题。

white-space：控制空白符与换行

white-space 决定如何处理元素内的空格、制表符和换行符，同时影响是否自动换行。

• normal：合并空白符，自动换行（默认行为）
• nowrap：合并空白符，不换行，文本会在一行内持续延伸
• pre：保留空白符和换行，不自动换行（类似 pre 标签）
• pre-wrap：保留空白符和换行，允许自动换行
• pre-line：合并多余空白符，保留换行符并允许换行

例如，防止文本换行可设置：
white-space: nowrap;
若需保留用户输入的回车和空格，推荐使用 pre-wrap。

word-wrap / overflow-wrap：控制长单词换行

word-wrap 是 overflow-wrap 的别名，用于控制是否在长单词或 URL 内部进行断行。

• normal：只在允许的断点处换行（如空格、连字符）
• break-word：允许长单词在任意字符处断开以防止溢出

典型应用场景：用户输入的超长英文或链接超出容器。
示例代码：
word-wrap: break-word;
或更标准写法：
overflow-wrap: break-word;

word-break：定义单词内断行规则

word-break 更激进地控制文本换行方式，尤其适用于中文、日文等无空格分隔的语言。

小绿鲸英文文献阅读器

英文文献阅读器，专注提高SCI阅读效率

352

查看详情

立即学习“前端免费学习笔记（深入）”；

• normal：按默认语言规则换行
• break-all：允许在任意字符间断行，常用于表格中防溢出
• keep-all：不允许在字符间断开，中文/日文不断词，适合标题类文本

比如在固定宽度表格单元格中，使用：
word-break: break-all;
可避免内容撑破布局。

综合应用建议

实际开发中，常结合多个属性实现理想效果。

• 单行溢出省略：
  

  white-space: nowrap;<br>overflow: hidden;<br>text-overflow: ellipsis;

  登录后复制
• 多行文本安全换行：
  

  word-wrap: break-word;<br>word-break: break-word;

  登录后复制
• 中英文混合内容推荐：
  

  word-wrap: break-word;<br>word-break: normal;

  登录后复制

基本上就这些。掌握 white-space、word-wrap 和 word-break 的差异与搭配，能有效应对大多数文本布局问题，让页面更健壮美观。

以上就是CSS文字溢出与换行控制_white-space word-wrap word-break应用的详细内容，更多请关注php中文网其它相关文章！