是不是在用CSS做文字排版时，经常会遇到并搜索这些问题： CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行... 本文会解决以上的全部问题困扰！说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集...

前言

是不是在用CSS做文字排版时，经常会遇到并搜索这些问题：

CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行...

本文会解决以上的全部问题困扰！

说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住，在需要时，打开本页面当字典查阅一下就可以了。

CSS文字折行

先来个MDN文档风格的简洁

CSS 属性 word-break 指定了怎样在单词内断行

值	说明
normal	使用默认的断行规则
break-all	对于 Non-CJK文本，可在任意字符间断行
keep-all	CJK 文本不断行。Non-CJK 文本表现同 normal
break-word	已废弃

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。word-wrap 现在被当作 overflow-wrap 的“别名”。

值	说明
normal	行只能在正常的单词断点处中断。（例如两个单词之间的空格）
break-word	表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

CSS 属性 line-break 可以用来处理如何断开带有标点符号的CJK文本的行

值	说明
auto	使用默认的断行规则分解文本
loose	使用尽可能松散的断行规则分解文本。一般用于短行的情况，如报纸
normal	使用最一般的断行规则分解文本
strict	使用最严格的断行原则分解文本
anywhere	在每个印刷字符单元的周围，都有一个自动换行的机会，包括任何标点符号或是保留的空白字符，或是单词之间

CSS 属性 white-space 是用来设置如何处理元素中的空白

值	说明
normal	连续的空白符会被合并，换行符会被当作空白符来处理
nowrap	和 normal 一样，连续的空白符会被合并。但文本内的换行无效
pre	连续的空白符会被保留。在遇到换行符或者`<br>`元素，或者需要为了填充「行框盒子」时才会换行。
pre-line	连续的空白符会被合并。在遇到换行符或者`<br>`元素，或者需要为了填充「行框盒子」时会换行。
break-spaces	与 pre-wrap的行为相同，另外有如下方所列区别：

break-spaces

下面的表格总结了各种 white-space 值的行为：

-	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行