目录
文本效果-补充
（1）white-space
（2）overflow
（3）text-overflow
文本效果-补充
（1）white-space
设置元素对内容中的空格、换行的处理方式
| 值 | 描述 |
|---|---|
| normal | 默认。文本空白 换行会被浏览器忽略。 换行会被解析为一个空格。 |
| pre | 保留文本原样式 比如空格或换行 能解析空格和换行，不会自动换行。 |
| nowrap | 文本不会换行，文本会在在同一行上继续（即使超出父盒子或者body也不换行，网页就会有滚动条），直到遇到br标签为止。 |
| pre-wrap | 保留空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| pre-line | 合并空白符序列（不能解析空格），保留换行符（能解析换行）。如果文本超出容器宽度处没有换行符自动换行 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
（2）overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 超出部分隐藏 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条
（3）text-overflow
用来控制超长溢出的文字内容的显示方式
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
1、单行文本溢出 （以下三个一般一起用） 一定要加宽度
div{width: 200px;height: 100px;border: 2px solid black;/* 强制一行显示*/white-space: nowrap;/* 超出部分隐藏 */overflow: hidden;/* 超出部分省略号 */text-overflow: ellipsis;}
2、多行文本溢出显示省略号 （一般不设置多行的，都设置单行的）
有较大的兼容性，适合用于webkit浏览器或移动端（移动端内核大部分是webkit内核）
-webkit-line-clamp：限制在一个块元素显示的文本的行数。为实现效果，它需要组合其他的WebKit属性。常见结合属性以下两点：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
div{width: 200px;/* 不要设置高度 */overflow: hidden;text-overflow: ellipsis;/* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */-webkit-line-clamp: 3;/* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical; }单词拆分p{width:9em; border:1px solid #000000;word-break:keep-all; }