本文主要是介绍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)*$来匹配最后一个单词之后的所有字符，并将其替换为省略号。
最终，当容器元素的文本内容被缩短到不再溢出三行时，循环结束。
这篇关于css实现三行，溢出显示省略号（后有js实现逻辑）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
