使用css截取字符串,保留省略号

浏览546

文字过多,可以使用css来截取字符串,保留省略号,兼容性也是最好的。

<p class="p1">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或</p>
<p class="p2">啦啦啦啦啦啦啦拉拉阿拉啦啦啦阿拉啦啦啦啦啦啦啦啦</p>

<style>

显示一行,超出隐藏,保留省略号
.p1{
	width:20rem;
    font-size: 1.6rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

截取两行,超出隐藏,保留省略号
.p2{
	color: #999;
    overflow: hidden;
    line-height: 1.4;
    margin: .3rem 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

</style>



  • 暂无任何回答