word-wrap word-break 张鑫旭博客

最新推荐文章于 2024-06-02 09:41:18 发布

原创最新推荐文章于 2024-06-02 09:41:18 发布 · 679 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细解析了word-break和word-wrap两个CSS属性的关键字值及其应用效果，通过实例对比了不同设置对文本换行的影响。

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

by zhangxinxu from http://www.zhangxinxu.com

本文地址：http://www.zhangxinxu.com/wordpress/?p=5061

了解word-break属性

MDN上展示的语法为：

/* 关键字值 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: unset;

几个关键字值的含义如下：

normal

使用默认的换行规则。

break-all

允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。（比如英语单词）

keep-all

不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和 normal一致。（中文也不能单字换行）

（CJK的每个字视作和英语的单词一样）

了解word-wrap属性

MDN上展示的语法为：

/* 关键字值 */
word-wrap: normal;
word-wrap: break-word;

/* 全局值 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;

几个关键字值的含义如下：

normal

就是大家平常见得最多的正常的换行规则。

break-word

一行单词中实在没有其他靠谱的换行点的时候换行。

word-wrap属性其实也是很有故事的，之前由于和word-break长得太像，难免会让人记不住搞混淆，晕头转向，于是在CSS3规范里，把这个属性的名称给改了，叫做：overflow-wrap. 哎呀，这个新属性名称显然语义更准确，也更容易区别和记忆。

会发现类似下图的效果：
word-break:break-all和word-wrap:break-word的区别截图

可以发现，word-break:break-all正如其名字，所有的都换行。毫不留情，一点空隙都不放过。而word-wrap:break-word则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。