字数
1207 字
阅读时间
5 分钟
空白处理
letter-spacing
可以用来控制 字符之间的间距 ，这里说的 " 字符 " 包括英文字母、汉字以及空格等。
具有以下一些特性：
（1）继承性
（2）默认值是 normal 而不是 0。虽然说正常情况下，normal 的计算值就是 0，但两者还是有差别的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。
（3）支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列
（4）支持小数值，即使 0.1px 也是支持的。
（5）暂不支持百分比值
word-spacing
letter-spacing 作用于所有字符，但 word-spacing 仅作用于 空格字符 ，即只用来增加空格的间隙宽度
white-space
用于如何处理元素内的 空白字符 ，这类空白字符包括 Space(空格) 键、Enter(回车) 键、Tab(制表符) 键产生的空白
因此，white-space 可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。
其属性值包括下面这些：
- normal：合并空白字符和换行符。
- pre：空白字符不合并，并且内容只在有换行符的地方换行。
- nowrap：该值和 normal 一样会合并空白字符，但不允许文本环绕。
- pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
- pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。
换行处理
word-break
- normal 使用浏览器默认的换行规则，允许字内换行
- break-all 允许在单词内换行
- keep-all 只能在半角空格或连字符处换行
word-wrap
- normal : 允许内容顶开指定的容器边界，允许字内换行。
- break-word : 内容将在边界内换行，允许单词换行
区别
- word-break: break-all; 比较霸道，会强行截断单词，一点缝隙不留；word-wrap: break-word; 相对温和，不会截断单词。word-wrap: break-word; 不会截断单词会带来一个小问题，就是可能页面上会有一片一片的留白，对于这个问题，可以使用 text-align: justify; 进行优化
- word-break: break-all; 对于长串的标点符号，如：，，，，，，，，，，，，，，，，，，，，无法截断，会超出容器；word-wrap: break-word; 则会将这种标点符号截断换行展示。对于 word-break: break-all; 的这个小问题，可以使用
line-break: anywhere;进行解决
总结
- 如果希望识别出换行符，使用 white-space: pre-line; 或 white-space: pre-wrap;
- 如果希望识别每个空格，使用 white-space: pre-wrap;
- 如果希望多个空格识别成一个空格，使用 white-space: pre-line;
- 如果希望长字母（长数字）可以换行，使用 word-break: break-all; 或 word-wrap: break-word;
- 如果不在乎单词被截断，使用 word-break: break-all;
- 如果希望长单词可以换行并且不希望字母被截断，使用 word-wrap: break-word;
- 如果希望长串的标点符号可以换行，使用 word-wrap: break-word; 或 line-break: anywhere;
- line-break: anywhere; 会截断单词
- word-wrap: break-word; 不会截断单词
- 文字属性一般都可以继承自父级，以上出现的文字属性都可以继承，在一些特定的页面，可以给最大的父级提前设置好下面的 [组合使用]
具体应用
组合使用：识别换行符、多个空格符，字母数字自动换行，标点符号自动换行，两端对齐
css
white-space: pre-wrap; // 识别换行符，相对于 white-space: pre-line; 可以识别多个空格符
word-wrap: break-word; // 相比于 word-break: break-all; 不会截断单词，并且 word-break: break-all; 无法截断长串的标点符号
text-align: justify; // 优化 word-wrap: break-word; 带来的留白单行文本超出一行显示省略号
css
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;超出 2 行显示省略号
css
width: 200px;
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display: -webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-line-clamp: 2; // 显示的行数
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
word-break: break-word;
// text-align: justify;参考
word-break - CSS: Cascading Style Sheets | MDN
css文字属性：white-space、word-break、word-wrap详解以及单行/多行文本溢出显示省略号
CSS 实现自动换行、强制换行、强制不换行的属性
贡献者
jiechen