纯css实现多行文本溢出隐藏

在网站中多行文本溢出隐藏是非常常见的,但是由于多行溢出文本的兼容性问题,大多数网站都会只使用单行文本溢出隐藏,今天看到一个多行溢出隐藏的代码感觉还不错,虽然没有原生的那么完美但也解决了大多数的问题。

单行文本溢出隐藏很好实现,也不需要考虑兼容性的问题,代码如下:

p{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

多行文本溢出隐藏代码非兼容写法(在IE下失效):

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; 
overflow: hidden;

兼容性写法:

p{
	position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
	width: 500px;font-size: 16px;
}
p::after{
	content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
	background: -webkit-linear-gradient(left, transparent, #fff 55%);
	background: -o-linear-gradient(right, transparent, #fff 55%);
	background: -moz-linear-gradient(right, transparent, #fff 55%);
	background: linear-gradient(to right, transparent, #fff 55%);
}

实现的原理:首先盒子不设置固定高度只设置行高(例如设置行高20px),通过设置最大高度来设置显示行数(例如max-width为60就表示显示三行,其余多的则隐藏掉)。然后在盒子的右下角定位省略号然后设置下过度效果。

参考文章地址:https://blog.csdn.net/AuroraCD/article/details/99840372

本文地址:https://www.dreamcs6.com/2020-02-20-1132.html

 

Author: 智宇愚

发表评论

电子邮件地址不会被公开。 必填项已用*标注