CSS3-文本布局
#前端# #css#
text-overflow
text-overflow影响块容器元素在内联前进方向上的溢出的内容，开发人员可以通过这个属性来设置溢出内容的展示形式，但是它不能影响块元素在底部方向的溢出。text-overflow属性不能单独生效，它需要和overflow和white-space一起使用，此时，white-space必须设置为nowrap或者pre，防止文本因为父元素宽度限制而被动换行。同时，使用text-flow必须要对该元素设置宽度。
text-overflow可以将溢出内容的展示形式设置为折叠、省略或者其他自定义字符串。
| CSS Property | CSS Values | |
|---|---|---|
| text-overflow | clip | |
| ellipsis | ||
| <string> | ||
| fade | ||
| *fade()* |
white-space
white-space属性用于设置元素内部的空白如何展示，空白主要包括空格，退格，换行等。这个设置的内容主要包括两个部分：
- 空白部分是否需要折叠，如何折叠
- 行上的换行是否换行以及如何换行
|CSS Property
|CSS Values
|备注
|||||
| 显式换行 | 空格和Tab | 被动换行 | 行尾空格和Tab | 行尾其他空白 | ||
|---|---|---|---|---|---|---|
| white-space | normal | 折叠 | 合并 | 换行 | 去除 | 保留原样 |
| nowrap | 折叠 | 合并 | 不换行 | 去除 | 保留原样 | |
| pre | 保留原样 | 保留原样 | 不换行 | 去除 | 不换行，保留在同一行 | |
| pre-wrap | 保留原样 | 保留原样 | 换行 | 保留原样 | 保留原样 | |
| pre-line | 保留原样 | 合并 | 换行 | 去除 | 保留原样 | |
| break-spaces | 保留原样 | 保留原样 | 换行 | 换行 | 换行 |
显式换行：\n和 <br />，被动换行：父元素宽度限制导致的文本换行
overflow
overflow属性用于控制当元素内部内容溢出容器时的显示和处理方式，当你使用这个属性时，必须限制元素的宽度或者高度，否则外部元素尺寸无限撑开，内部内容将永远无法溢出容器。
| CSS Property | CSS Values | 备注 | |
|---|---|---|---|
| overflow | visible | 默认值，不进行裁剪 | |
| hidden | 裁剪溢出部分，进行隐藏 | ||
| scroll | 溢出部分显示滚动条，即便不溢出，也会显示一个滚动条 | ||
| auto | 溢出时显示滚动条，不溢出不显示滚动条 | ||
| overflow-x | visible, hidden, scroll, auto | 单独设置水平轴方向的溢出 | |
| overflow-y | visible, hidden, scroll, auto | 单独设置垂直轴方向的溢出 |
word-break
word-break指定怎么在单词内断行。当然，这也需要外部容器有一个宽度或者最大宽度的限制，否则容器内容不会设计到被动换行的断行断字行为。对于CJK文本来说，word-break的默认行为很简单，如果行内放不下就换行，但是对于非CJK文本（C: 中文，J：日文，K：韩文），比如英文，因为换行必须考虑单词的完整性，浏览器对于word-break的处理就比较复杂了，情况如下:
- 浏览器按照空格来识别单词，默认情况下，行内放不下文本时，浏览器也不会在单词内自动换行。也就是说：如果你的非CJK文本没有空格，浏览器默认不会帮你自动换行，此时，不论单词长度是否超过元素宽度，浏览器会强行将内容渲染，不管超出以后的样式，也不会撑开元素的宽度（注意：这里一定不能理解为撑开元素宽度）。
- 当一行放不下时，浏览器会尝试将最后一个单词放入下一行，但是如果下一行还是放不下这个单词，浏览器会任由这个单词超出容器，不会拆开这个单词。此时，浏览器将文本分行，但是第二行还是超过容器宽度，内容直接超出容器显示（注意：这里一定不能理解为撑开元素宽度）
| CSS Property | CSS Values | 备注 |
|---|---|---|
| word-break | normal | 默认值。 CJK文本放不下就换行，非CJK文本放不下就溢出 |
| break-all | CJK文本保持默认行为， 非CJK文本在任意字符处进行断行 | |
| keep-all | CJK文本也不换行，放不下就溢出， 非CJK文本保持默认行为，放不下就溢出 | |
| break-word | CJK文本保持默认行为， 非CJK文本优先在单词边界处断字 |
总结：break-all和break-word都是用来处理非CJK文档的，此时，CJK文本的行为还是放不下就换行。 keep-all其实是用来处理CJK文档的，使CJK文档不换行，非CJK文档保持默认值。
