文本溢出的处理

xiaoxiao2021-02-28  126

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

转载请注明原文地址: https://www.6miu.com/read-49607.html

最新回复(0)