## 文本效果 **1. text-overflow**是指文本溢出后用户如何处理溢出的文本。 值：ellipsis 显示省略符号来代表被修剪的文本。 clip 是默认值，直接将溢出的文本修剪，就直接不显示 <br/> <br/> **2. white-space** 设置如何处理元素内的空白。 值： normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <``pre``>标签 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <`br`> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 <br/> <br/> **3. word-wrap**允许长单词或 URL 地址换行到下一行 值：break-word 在长单词或 URL 地址内部进行换行。 （IE浏览器）连续的英文字符和阿拉伯数字,使用**word-wrap : break-word ;或者word-break:break-all;**实现强制断行 <br/> <br/> **4.letter-spacing**设置英文字母之间或中文每个文字之间的空白。 值：normal : 　默认间隔 　　length : 　由浮点数字和单位标识符组成的长度值，允许为负值 **word-spacing**设置每个英文单词之间的空白，对中文无效。 值：normal和length（长度） <br/> <br/> #### **列子：** **a.** 文字过多显示省略号方法 答：text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 需要设置宽度 <br/> **b.** 无需设置宽度的文本省略方法 一行文本显示省略号： .ellipsis{ overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-line-clamp: 1;   -webkit-box-orient: vertical;   white-space: normal !important;   word-wrap: break-word;  } 两行文本显示省略号： .ellipsis-2{ overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;   white-space: normal !important;   word-wrap: break-word;  } 3行以此类推，只要把 -webkit-line-clamp:后面的值改为3即可。