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

Posted 三页黎明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多行文本溢出显示...的方法(-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:2;    
    -webkit-box-orient: vertical;
}

 

效果图

 

以上是关于多行文本溢出显示...的方法(-webkit-line-clamp)的主要内容,如果未能解决你的问题,请参考以下文章

CSS实现单行多行文本溢出显示省略号(…)

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

单行溢出和多行溢出显示省略号

文本溢出显示省略号

实现单行或多行文本溢出显示省略号

单/多行文本溢出显示省略号+清除浮动