一、文本溢出显示省略号
当CSS文本内容过长，无法在对应的容器或者浏览器视口中完全展示时，我们可以采用CSS属性text-overflow和overflow等方法，来实现以省略号结尾的文本显示效果。
例如，我们可以通过如下代码实现文本超出隐藏，省略号结尾的效果：
.text {
white-space: nowrap; /*禁止换行*/
overflow: hidden; /*隐藏溢出部分*/
text-overflow: ellipsis; /*结尾以省略号...显示*/
}二、CSS超过两行部分为省略号
CSS文本内容超过两行时，将部分文字省略并显示省略号，是一种常见的展示方式。我们可以通过如下代码实现：
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2; /*指定要显示的行数*/
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}若CSS文本过长，则只会显示前两行文字，超过部分将展示省略号。
三、CSS超过三行部分为省略号
与超过两行部分为省略号的方式类似，我们可以通过如下代码实现CSS文本超过三行部分省略的效果：
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3; /*指定要显示的行数*/
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}在此基础上，我们可以通过调整line-clamp的值，指定要显示的行数，以实现不同行数部分省略的效果。
四、CSS文本超出显示省略号其他实现方法
除了以上提到的基于text-overflow和-webkit-line-clamp实现省略号的方法，还有以下其他实现方式：
1、使用JavaScript动态计算文本节点的实际高度，判断是否需要添加省略号。
2、使用CSS3动画实现点击展开、收起省略号的效果。
3、使用canvas绘制文本，并通过JS计算文本宽度，超出部分用省略号代替。
五、总结
CSS超过两行省略号是一种常见的前端处理方式，可以通过text-overflow和-webkit-line-clamp等CSS属性实现。除此之外，还有其他实现方式，如JavaScript动态计算、CSS3动画和canvas绘制等。在实际开发中，应根据需求选择最合适的实现方式。
原创文章，作者：LQYU，如若转载，请注明出处：https://www.506064.com/n/150227.html
微信扫一扫 
支付宝扫一扫 