css实现三行，溢出显示省略号（后有js实现逻辑）

css实现代码：

.text-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

解释：
1.-webkit-box 和 -webkit-box-orient 属性将容器元素设置为一个垂直方向的弹性盒子，并指定了最多显示三行文本；
2.overflow: hidden 来隐藏超出容器高度的文本；
3.text-overflow: ellipsis 来在文本溢出时显示省略号；

注意，
-webkit-line-clamp 是一个非标准属性，只在 WebKit 内核的浏览器（如 Chrome 和 Safari）中生效。如果需要兼容其他浏览器，可以考虑使用 JavaScript 或其他方法来实现类似的效果。

javascript实现代码：

<div id="textContainer">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum turpis nec orci aliquam, et luctus nisi feugiat.
</div>

var textContainer = document.getElementById("textContainer");
var lineHeight = parseInt(window.getComputedStyle(textContainer).lineHeight);
var maxHeight = lineHeight * 3;

if (textContainer.offsetHeight > maxHeight) {
  while (textContainer.offsetHeight > maxHeight) {
    textContainer.textContent = textContainer.textContent.replace(/\W*\s(\S)*$/, '...');
  }
}

解释：
1.通过 document.getElementById() 方法获取到 id 为 “textContainer” 的容器元素；
2.window.getComputedStyle() 方法获取到容器元素的行高（line-height）属性，并将其转换为整数；
3.计算出最大高度（maxHeight），即三行文本的高度；
4.检查容器元素的实际高度是否超过最大高度。如果超过，则进入循环；
在循环中，我们使用正则表达式将容器元素的文本内容逐渐缩短，直到其高度不再超过最大高度为止。我们使用正则表达式\W*\s(\S)*$来匹配最后一个单词之后的所有字符，并将其替换为省略号。
最终，当容器元素的文本内容被缩短到不再溢出三行时，循环结束。

kaiking_g