文本超出隐藏，并显示省略号

转角羊儿

已于 2022-06-11 18:32:41 修改

阅读量815

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-06-11 18:30:07 首次发布

本文链接：https://blog.csdn.net/qq_41988669/article/details/125237408

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文本超出隐藏，并显示省略号

1.超出一行，隐藏文本并显示省略号

.demo1 {
    overflow: hidden; /*超出的文本隐藏*/
    white-space: nowrap; /*溢出不换行*/
    text-overflow: ellipsis; /*溢出用省略号显示*/
}

2.超出两行甚至多行，隐藏文本并显示省略号


.demo2 {
    overflow: hidden;  /*超出隐藏*/
    text-overflow: ellipsis;   /*显示省略号*/
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示。*/
    -webkit-line-clamp: 2; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 */
    line-clamp: 2;
    -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
}