## 文本效果 **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即可。