你真的会CSS换行吗在浏览器中 CJK 文字（中日韩统一表意文字）的默认换行行为是什么？我能用哪些 CSS属性来实现我

CJK 文字（中日韩统一表意文字）

1、在浏览器中文字的默认换行行为

1、CJK 文字

对于 CJK 文字，所有文字内容都是换行点，即当宽度很小时，文字会变成一列；

但是标点符号有一些特别的换行特性：

避首标点：不能出现在行首的标点符号（eg：逗号、句号、问号、感叹号）；
避尾标点：不能出现在行尾的标点符号（eg：上引号、上括号）；
波折号：在不同的浏览器中有不同的避首避尾规则；

2、非 CJK 文字（英文、数字）

对于非 CJK 文字，默认不换行，只有遇到空格（U+0020）或则短横线连接符（U+002d）才会换行；

2、使用 CSS 改变默认换行行为

（第3节有系统的css属性罗列，第2节是用法）

1、使中文内容不可换行

添加如下 css 时，中文不能成为换行点：

word-break: keep-all;

并且此时英文内容保持默认换行行为；

2、使中文内容没有避首避尾特性

添加如下 css 时，中文的标点符号没有了避首避尾特性，和文字一样换行：

line-break: anywhere;

3、使连续破折号可换行

默认情况下，不换行的破折号可能会超出容器宽度：

此时使用如下 css 可以使破折号自动换行：

word-wrap: break-word;

4、使英文、数字成为换行点

可以使用下面的 css 使英文、数字强制换行：

word-break: break-all;

5、使空格不再是换行点

可以使用下面的 css，改变空格的默认行为，使空格不再成为换行点：

white-space: nowrap;

6、英文标点强制换行

在默认换行行为中，某些英文词组（eg：i'm）不可换行，使用如下 css 可以使英文标点强制换行：

overflow-wrap: anywhere;

3、相关 css 属性

1、word-break:

normal：使用默认换行行为；
keep-all：使 CJK 文字不再是换行点；
break-all：使非 CJK 文字也成为换行点；
break-word（废弃属性，尽量不要使用）：使单词不截断换行，并且当单词长度超过 dom 宽度时截断换行；

注：

将要废弃的 word-break: break-word; 的效果等同于 word-break: normal; overflow-wrap: anywhere;

当一行的剩余位置放不下一个单词时，单词会换行到下一行；并且当整个一行放不下一个单词时，单词也会被截断换行；

2、overflow-wrap

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

值有：

normal：行只能在正常的单词断点处中断；eg：单词之间的空格
break-word：如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词也会被强制分割换行；
anywhere: 在任何地方都强制换行（eg：有些词组（i'm）即使在break-word下也不能换行，但使用anywhere可以使其在标点符号的地方强制换行）

break-word 和 anywhere 的区别：

3、word-wrap

微软的私有有属性，但是推广到了其他浏览器，和 overflow-wrap 的效果一样；

在 CSS3 之后，将 word-wrap 重命名为了 overflow-wrap，但是 word-wrap 还依然保留下来了作为 overflow-wrap 的别名；

值有：

normal
break-word

4、white-space

此属性可以表示 white-space-collapse 和 text-wrap 属性的简写两个值；或则被指定为从下面的值：

此属性用来设置如何处理元素中的空白；

"\t" TAB \u0009（制表符）

"\n" LF \u000A（换行符）

"\r" CR \u000D（回车符）

" " SPC \u0020（真正的空格符）

normal：连续的空白符会被合并，换行符会被当作空白符来处理，行尾会在空白符处换行；
nowrap：连续的空白符会被合并，换行无效；
pre：连续的空白符会被保留，在遇到换行符或者<br>元素时才会换行；
pre-wrap：连续的空白符会被保留，行尾遇到空白符时也会换行；
pre-line：连续的空白符会被合并。在遇到换行符或 <br/>元素时，或者根据填充行框盒子的需要换行。
break-spaces：与pre-weap 的行为一致；

注：当white-space 为 normal 时，word-break 和 overflow-wrap 的值才能生效，当 white-space 的值为 nowrap 时，两个属性的值都不生效；

5、line-break

对 CJK 文字采用更强或更弱的换行规则（eg：决定如何处理带有标点符号的 CJK 文本的行）；

auto：使用默认的断行规则；
loose：使用最一般的断行规则；
strict：使用最严格的断行规则；
anywhere：在每一个印刷字符的周围都可以换行；

6、hyphens

告知浏览器在换行时如何使用连字符-连接单词；

连字规则：连字规则具有语言特定性，浏览器只有在当前属性存在且有合适的连字字典可用的情况使用连字进行连接；（规范中没有明确定义连字规则，因此在不同的浏览器中可能有所区别）

munual：默认规则，在单词建议换行的地方使用-连字符，并换行（即手工在单词中插入 ）；
none：换行时单词不会被打断，甚至在单词内的字符建议有换行点时也不会换行，只会在空白符处换行；
auto：由浏览器自动在期望换行的地方使用-，并换行；

4、英文换行样式最佳实践

1、展示英文文本换行的最佳实践

.div {
  word-break: normal;
  word-wrap: break-word; // 为了兼容对 overflow-wrap 部分支持的浏览器
  overflow-wrap: anywhere;
}

当一行的剩余位置放不下一个单词时，单词会换行到下一行；并且当整个一行放不下一个单词时，单词也会被截断换行；

效果：

2、邮件中的最佳实践

/*考虑邮件对复杂兼容性的要求*/
.div {
  word-break: normal;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

你真的会CSS换行吗