文本溢出问题

类似的场景：页面中某块区域的文本内容过多，导致占用了其他内容的空间。效果如下图所示：

上图文本中一共占用了 11 行文本。实际需求中，我们只希望显示 2 行即可，剩余的内容用省略号（...）替代。

通常，处理这类问题的方式有以下几种：

1. 使用 JS 处理，先将字符串按照一定长度进行切割，去掉超出部分的内容，然后在末尾拼接省略号。
2. 使用 CSS3 处理，利用相关的 Webkit 属性，结合 overflow 属性通过样式实现。

 代码1

var text = document.querySelector(".more2_info_name");
        text.style['-webkit-line-clamp'] = 2;
        text.style.overflow = 'hidden';

知识点：

1.选择class 用querySelector(".name");

选择id 用querySelector("#id");

2.-webkit-line-clamp 多行文字溢出...属性

用于控制文本在容器中的行数，即最多显示几行。具体来说，-webkit-line-clamp: 2; 表示最多显示两行文本，超出部分将被省略号代替。该属性只在WebKit浏览器中有效。

3.overflow: hidden;   用于隐藏超出元素框的内容

代码2

var text = document.querySelector(".more2_info_name");
        text.style.cssText = 'display:-webkit-box;-webket-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden';

用原生js修改元素样式：将要改变的样式多个写在一起

dom.style.cssText = 'display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;'