多行文本溢出显示...的方法(-webkit-line-clamp)

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

demo.html

<div class="li_title">得力/deli LED灯立体浮雕地球仪/标准教学 高清中英文对照 内显洋流图行政图地形图 送放大镜（ Φ 30cm）</div>

demo.css

.shop .li_title{

    width:100%;

    font-size:16px;

    line-height:20px;

    height: 40px;

    margin-bottom:40px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp:;

    -webkit-box-orient: vertical;

}

效果图

巴特西

多行文本溢出显示...的方法(-webkit-line-clamp)

最新文章

热门文章