css之word-break及word-wrap(overflow-wrap)

最新推荐文章于 2025-06-10 18:34:55 发布

原创最新推荐文章于 2025-06-10 18:34:55 发布 · 1.1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#word-break #word-wrap #overflow-wrap #自动换行 #html

前端专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨CSS中word-break和overflow-wrap属性的使用方法及差异，解析normal、break-all、keep-all、break-word等值对文本换行的影响，适合前端开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、介绍

今天学习markdown时，遇到了一个概念，“hard-wrapped”，然后网上搜索，发现一堆名词，如：line break、word wrapping、word wrap、line wrap？？？啥东东？头都大了。最后发现它们只是概念模糊，但是想表达的无非就是软换行和硬换行。软换行有两种方式，其中就是自动换行，自动换行涉及到一个word-wrap的概念。word-wrap指的是内容要超出该行范围时，具体如何换行。

接下来讨论的就是css中的word-break和word-wrap（overflow-wrap）样式，如果不懂的，先了解一下换行的概念，请参考我的博客：Line breaking 换行

至于其他的比如hyphens 样式，这里不讨论了，毕竟中文环境下，用不到了吧。。

二、word-break

html中文本可以自动换行，而word-break则规定哪里自动换行，word-break默认normal，下面给出所有取值：

Value	Description
normal	Default value. Uses default line break rules
break-all	To prevent overflow, word may be broken at any character
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"。也就是中文不自动换行了，而英文使用默认换行方式
break-word	To prevent overflow, word may be broken at arbitrary points。这是不是标准化的值，因此才会出现word-wrap（overflow-wrap）
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

2.1、normal

使用默认值，那么会默认在word（汉字）或者标点符号后换行。但是对于英文来说，有些单词很长以至于即使换行也容纳不下时，还是会溢出的。而汉字也就占两个字节，还是放得下的。

2.2、break-all

对于中文没啥影响，英文的话，如果溢出时可以在任何地方换行，包括在单词内的某个位置换行。下图已用不同颜色标注了3个单词，发现快溢出时就换行了，不管是在什么位置。

2.3、keep-all

中文不自动换行，英文表现出和normal一样的行为

2.3、break-word

可以发现，normal模式下，单词过长会溢出，但是break-word模式下，单词过长就在单词内换行。注意，该值未列入标准。

三、overflow-wrap

overflow-wrap原先名做word-wrap，后被改名为overflow-wrap，word-wrap作为别名。默认normal值，可选break-word，就是因为word-break的break-word未列入标准，才会一般使用overflow-wrap的break-word值。效果和word-wrap的break-word一样。