css 让文字在第二行超出显示省略号

诺小D

已于 2023-08-09 18:14:31 修改

阅读量1.9k

点赞数 1

文章标签： css html html5

于 2021-08-27 16:39:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46352558/article/details/119956223

版权

这篇博客介绍了如何使用CSS来实现文本超出隐藏并显示省略号的效果，主要涉及`overflow`、`text-overflow`和`-webkit-line-clamp`等属性的组合使用，适用于多行文本的省略显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

p{
width:100px;
    overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/
    text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
    display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
    -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
    -webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
}

图列
在这里插入图片描述


这个没有问题（2023年8月9号新加）自定义行数超出部分省略号显示

#example {
   overflow: hidden;/*超出文本隐藏*/
   text-overflow:ellipsis; /*超出部分省略号显示 */
   display: -webkit-box;/*弹性盒模型*/
   -webkit-box-orient: vertical;/*上下垂直*/
   -webkit-line-clamp: 2;/*自定义行数*/
 }