文字超出后省略号是text-overflow:ellipsis
<style>
.t{width:100pxline-height:20pxmax-height:60pxoverflow:hiddentext-overflow:ellipsis}
</style>
<p class="t">测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
.goods {
/* 一行显示*/
-webkit-line-clamp: 1
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box
/*子元素的排列方式 */
-webkit-box-orient: vertical
text-overflow:ellipsis
overflow: hidden
word-break:break-all
}
处理办法:
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性：
2-1.display: -webkit-box必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2-2.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
2-3.text-overflow: ellipsis，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
如何兼容IE:使用jq插件实现。
效果图:
