一。对于显示文本的时候,有时候由于文本太长没有必要全部显示的时候。例如:有一个宽度为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)拼接字符串在裁剪后的语句后面加上 ‘...’ 该字符串所得效果如上图一样。