笔记：css能做到文本超出第二行显示省略号

原创于 2019-10-11 13:49:02 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#省略号

css 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本溢出时自动添加省略号的方法，通过组合使用overflow、text-overflow和display属性，以及-webkit-line-clamp属性来限制块元素中显示的文本行数。

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

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