文本溢出的处理

一。对于显示文本的时候，有时候由于文本太长没有必要全部显示的时候。例如：有一个宽度为280px大小的一个<p>,但是我们的文本长度却大于280px。我的处理方式有两种：

  1.通过css 进行处理：

p{
     width: 280px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

text-overflow 规定当文本溢出时，所要做的事情。clip 修剪文本。ellipsis 显示省略符号来代表被修剪的文本。一般情况下都是使用 text-overflow 的 ellipsis这个属性。

overflow 属性规定当内容溢出元素框时发生的事情。对于文本的处理主要用到hidden：裁剪多余的部分。

white-space用于处理元素的空白。上面使用的 nowrap 代表不换行。

通过上面的css语句就可以做到了。如图效果

   2.通过js进行处理。js的处理方式是：（1）找到要进行文本处理的元素。（2）计算在当前宽度下可以容纳多少字符。（3）通过 if 语句进行字符的判断。（4）使用slice 函数裁剪多余的字符。（5）拼接字符串在裁剪后的语句后面加上 ‘...’ 该字符串所得效果如上图一样。