无需登录 数据私有 本地保存

文本换行策略对比 - overflow/break演示

12
0
0
0
预设:
容器宽度: 300px
overflow-wrap: normal 默认
overflow-wrap: break-word 推荐
overflow-wrap: anywhere 激进

overflow-wrap 控制长单词/URL在溢出容器边界时是否换行。break-word 仅在必要时断词;anywhere 允许在任何字符间断词,影响最小内容尺寸计算。

word-break: normal 默认
word-break: break-all 强制断词
word-break: keep-all CJK友好
word-break: break-word 兼容

word-break 决定单词在何处断开。break-all 在任何字符间强制断词;keep-all 保护CJK文本不断词;break-word 是overflow-wrap:break-word的旧写法。

white-space: normal 默认
white-space: nowrap 不换行
white-space: pre
white-space: pre-wrap 常用
white-space: pre-line
white-space: break-spaces

white-space 控制空白符处理与换行行为。pre 保留所有空格和换行;pre-wrap 保留空格换行并自动折行;pre-line 保留换行但折叠空格。

overflow 属性对比(固定高度80px)
overflow: visible 默认
overflow: hidden
overflow: scroll
overflow: auto 推荐
overflow: clip
text-overflow 属性对比(固定200px + nowrap)
text-overflow: clip 默认
text-overflow: ellipsis 推荐

overflow 控制内容溢出容器时的行为;text-overflow 需配合 overflow:hidden + white-space:nowrap 使用,ellipsis 在截断处显示省略号。

常见问题 & 知识点
overflow-wrap: break-word 和 word-break: break-all 有什么区别?

overflow-wrap: break-word 仅在长单词即将溢出容器边界时才在任意位置断词,优先保持单词完整性。
word-break: break-all无条件在任何字符间断词,即使单词可以完整放入容器也会被拆断。前者更温和,后者更激进。

overflow-wrap: anywhere 和 break-word 有何不同?

anywhere 允许在计算最小内容尺寸(min-content)时就在任意字符间断词,而 break-word 仅在布局时按需断词。
实际表现:在固定宽度容器中两者相似;但在弹性布局(如flex/grid的min-content)中,anywhere 会使容器更窄。

white-space: pre 和 pre-wrap 的区别是什么?

pre 保留所有空格和换行,但不会自动换行,长行会水平溢出。
pre-wrap 同样保留空格和换行,但会在容器边界自动折行,是展示代码片段最常用的值。

text-overflow: ellipsis 为什么有时候不生效?

text-overflow: ellipsis 必须同时满足三个条件才能生效:
overflow: hidden(或scroll/auto/clip)
white-space: nowrap(强制单行)
③ 容器有确定的宽度限制,文本实际溢出。
缺少任一条件,省略号都不会出现。

overflow: hidden 和 overflow: clip 有什么区别?

hidden 裁剪内容但会创建一个滚动容器(用户可通过键盘/滚轮滚动,只是滚动条被隐藏)。
clip完全禁止滚动,不会创建滚动容器,内容被强硬裁剪。对于纯视觉裁剪且不希望任何滚动行为时使用clip。

中英文混排时如何选择换行策略?

中英文混排推荐使用 overflow-wrap: break-word + word-break: keep-all(或不设置word-break)。
keep-all 保护中文词语不被意外断开,break-word 则处理超长英文单词/URL的溢出问题,两者配合兼顾中英文排版美感。

word-break: keep-all 对英文有影响吗?

keep-all 主要影响CJK(中日韩)文本,防止在字符间随意断词。对于英文,它不影响正常的单词间换行,英文单词仍会在空格处断开。
但如果一个英文单词超长且没有空格,keep-all 下它可能不会断词(除非配合overflow-wrap:break-word)。