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

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

 

1

<div class="content">css实现超出部分显示省略号，控制文字css实现超出部分显示省略号，控制文字</div><br> <br>/* 显示一行，省略号 */<br>    .content{<br>        width:200px;<br>        white-space: nowrap;<br>        text-overflow: ellipsis;<br>        overflow: hidden;<br>        word-break: break-all;<br>    }<br>/* 显示两行，省略号 */<br> .content{<br>    width:200px;<br>    text-overflow: -o-ellipsis-lastline;<br>    overflow: hidden;<br>    text-overflow: ellipsis;<br>    display: -webkit-box;<br>    -webkit-line-clamp: 2;<br>    line-clamp: 2;<br>    -webkit-box-orient: vertical;<br>}<br>

​

 

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

 

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

 

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

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