纯css实现超出部分显示省略号，控制文字行数

最新推荐文章于 2023-06-16 15:41:34 发布

hubert39641020

最新推荐文章于 2023-06-16 15:41:34 发布

阅读量289

点赞数

文章标签： html css3

原文链接：https://blog.csdn.net/SmartJunTao/article/details/108465630

版权

<div class="content">css实现超出部分显示省略号，控制文字css实现超出部分显示省略号，控制文字</div>

/* 显示一行，省略号 */
    .content{
        width:200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
/* 显示两行，省略号 */
 .content{
    width:200px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。