前端使用经验——如何在<p>元素中展示固定行数的文字,超出部分显示省略号

分类:计算机 | 前端 | CSS | 综合 43
更新:2021-11-04 01:21:51
编辑

1 说明

最近项目上有个需求,就是有一个网站列表,每个网站下面要加上一段简介,简介文字有行数限制,超出行数以后后面的文字用省略号显示。

2 CSS代码

.websiteul p {
    margin: 5px 3px;
    font-size: 14px;
    color: #555;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /*设置p元素最大可以显示4行文字*/
    -webkit-box-orient: vertical;
}

3 效果图