在处理网页文本排版时，经常会出现两类问题：一类是长英文单词或连续的英文字母数字把容器撑得变形，另一类是希望超出的文字用省略号显示，结果省略号死活不出现。这两个问题的解决方案分别指向word-wrap和text-overflow这两个CSS属性。虽然它们都跟文本的显示有关，但作用机制完全不同，混用往往得不到想要的效果。
word-wrap是干什么的：控制长单词的换行行为
word-wrap属性的核心作用是决定当一个单词长到放不下当前行时，浏览器是否允许在单词内部强制断行。它的默认值是normal，即只在单词之间的空格、连字符等合法断点处换行，如果某个单词本身比容器还宽，就会溢出容器，把布局撑坏。
把word-wrap设置为break-word后，浏览器会在长单词内部寻找断行点，把放不下的部分换到下一行显示。典型场景是用户输入的长URL、无空格的日文假名串，或者测试时输入的一长串英文字母，这些内容在没有空格的情况下默认是不会断行的，必须依靠break-word来兜底。
.long-text {
word-wrap: break-word;
/* 现代浏览器推荐使用新名字 */
overflow-wrap: break-word;
width: 200px;
border: 1px solid #ccc;
}
需要注意的是，word-wrap这个属性名其实是CSS3之前的旧名称，CSS3文本规范中已经把它更名为overflow-wrap，两者的取值和效果完全一致。出于兼容性考虑，实际项目中通常两个都写，旧浏览器识别word-wrap，新浏览器识别overflow-wrap，写在后面的新属性会优先生效。
另外还有一个容易混淆的属性叫word-break。word-break取值为break-all时会在任意字符之间断行，哪怕单词还有空间也照断不误，导致英文排版很难看；而overflow-wrap: break-word只在单词放不下的时候才断，尽量保持单词的完整性。除非确实需要在CJK中文与英数混排时强制每行填满，否则优先使用overflow-wrap。
text-overflow是干什么的：控制溢出文本的显示方式
text-overflow属性处理的是另一个维度的问题：当文本因为容器宽度不够而溢出时，溢出部分以什么形式呈现。它最常用的值是ellipsis，也就是在文本被截断的位置显示省略号；另一个取值是clip，直接裁切不显示任何标记，这也是默认行为。
但很多开发者会发现，只写一行text-overflow: ellipsis根本看不到省略号。这是因为该属性生效有两个前提条件：一是容器必须有overflow: hidden把溢出内容裁掉，二是white-space: nowrap禁止文本换行。三个属性缺一不可，这也是前端面试中的高频考点。
.ellipsis {
width: 200px;
white-space: nowrap; /* 禁止换行，让文本溢出 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 溢出处显示省略号 */
border: 1px solid #ccc;
}
单行省略是经典用法，多行省略则要借助另一个思路：使用display: -webkit-box配合-webkit-line-clamp来限制行数。这个方案虽然带-webkit-前缀，但目前主流浏览器包括Chrome、Firefox、Safari都已支持，兼容性相当不错。
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 最多显示两行 */
overflow: hidden;
}
text-overflow还有一个小众值是自定义字符串，例如text-overflow: '---'，可以在截断处显示指定符号，不过目前仅Firefox完整支持，生产环境不建议依赖。
两者的本质区别与搭配使用
从根本上讲，word-wrap解决的是“在哪里换行”的问题，它改变的是文本的换行策略，文本仍然完整显示，只是位置发生了移动；而text-overflow解决的是“溢出后显示什么”的问题，它改变的是溢出内容的表现形式，文本实际上被裁掉了。前者作用于换行阶段，后者作用于裁切阶段，两者并不冲突。
| 对比维度 | word-wrap / overflow-wrap | text-overflow |
|---|---|---|
| 作用对象 | 换行断点位置 | 溢出文本的呈现方式 |
| 文本是否完整 | 完整显示，只是位置调整 | 被裁切，内容不完整 |
| 是否依赖其他属性 | 可单独使用 | 必须配合overflow和white-space |
| 典型场景 | 长URL、长英文串撑破容器 | 单行或多行标题省略号 |
两者也可以配合使用。比如一个聊天消息气泡，希望最多显示两行，超出部分省略；如果消息里包含长链接，还需要保证链接能正常断行而不撑坏布局。这时就可以同时设置overflow-wrap: break-word处理长单词，再用-webkit-line-clamp处理多行截断，两个属性各司其职互不干扰。
还有一个常见的坑：容器设置了word-wrap: break-word之后，长单词虽然换行了，但如果容器同时限制了固定高度且没有overflow处理，换行后的内容依然会纵向溢出。这说明break-word只负责横向的断行，纵向的溢出还需要overflow或截断方案来处理。理解了每个属性负责的具体环节，文本排版问题就能迎刃而解。
word-wraptext-overflowCSS文本属性修改时间：2026-09-05 23:04:55