直播电商平台开发，css实现超出部分显示省略号，控制文字

直播电商平台开发，css实现超出部分显示省略号，控制文字

<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 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

 以上就是 直播电商平台开发，css实现超出部分显示省略号，控制文字，更多内容欢迎关注之后的文章