文本溢出显示省略号如何实现？

2021-03-03 10:31发布

站内问答 / Web前端
1173 3 3
3条回答
刘家起 - coding
2021-03-04 16:38

（1）单行文本溢出显示省略号

P{
    width:200px； /*限定盒子的宽度*/
    overflow:hidden;   /*给元素设置溢出隐藏属性*/
    text-overflow:ellipsis;  /*文本溢出显示省略号*/
    white-space:nowrap; /*文本不换行*/
}

（2）多行文本溢出显示省略号

方法1：利用WebKit的CSS扩展属性(只有-webkit内核才有作用)

P{
    width:200px； /*限定盒子的宽度*/
    overflow: hidden; /*给元素设置溢出隐藏属性*/
    text-overflow: ellipsis; /*文本溢出显示省略号*/
    display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
   -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性，它没有出现在 CSS 规范草案中。*/
   -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
}

方法2：利用伪元素模拟溢出显示省略号的效果（兼容性比较好）

实现要点：

将height设置为line-height的整数倍，防止超出的文字露出。

给 .p1:after 添加渐变背景可避免文字只显示一半。


一周热门 更多>