多行省略

对于多行文字经常会有控制行数的需求,特别是字数不可控的的标题,其中的难点是最后行末的省略号,加上省略号也让文本显得更为优雅,易读。

单行省略

.text-overflow { 
    overflow: hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap;
    max-width: 100%; 
}

上述代码使用频率较高,浏览器的支持情况也良好。

多行省略

webkit弹性盒模型方案

.line-clampin { 
    overflow: hidden; 
    text-overflow:ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp:3; 
    -webkit-box-orient:vertical; 
}

webkit的浏览器支持多行省略号,这种方案的好处很明显比较优雅,代码量少,特别适用针对Android,iOS移动设备的网页。

当然需要注意的是此方法使用了弹性盒模型(flexbox),而且使用它的盒子中不能使用padding,倘若使用padding,会让其余行露出来。

after伪元素方案

此处的思路是在行末使用after伪元素的content属性或者backgroud属性创造出省略的样式。

p {  
    position:relative; 
    line-height:1.4em; 
    height:5.6em; /* 4 times the line-height to show 4 lines */ } 
p::after {  
    content:"..."; 
    font-weight:bold; 
    position:absolute; 
    bottom:0; 
    right:0; 
    padding:0 20px 1px 45px; 
    background:url(ellipsis_bg.png) repeat-y; 
    }

上述代码在content中用了省略号,还有个思路是content属性值为空,background属性中用CSS3渐变设置渐隐的样式。

这种方案的好处是浏览器支持比较广泛(不支持after的浏览器自然不支持),缺点就是不够优雅,after伪元素很可能会有盖住半个字的现象。

after伪元素方案升级

感谢@强-记的提醒:“after伪元素方案,如果不满3行不是有bug?”,稍微考虑了下,可以使用这样的方式来解决多行省略的问题。

p {  
    position:relative; 
    font-size:14px; 
    line-height:1.4em; 
    max-height:4.2em; /* 1.4 * 3 */ 
    overflow: hidden; 
} 
p::after {  
    content:"..."; 
    font-weight:bold; 
    position:absolute; 
    top:38px; /* 14 * 1.4 * 2 */ 
    right:0; 
    padding:0 20px 1px 45px; 
    background:#f8f8f8; 
}

Demo

解决的思路很简单,不固定p的高度,给一个最大高度,省略号的部分使用绝对定为的top来定为,这样不到3行的省略号自然被隐藏了。

至于after的浏览器支持问题,如果不介意自然也可以在内包裹标签来实现

opera浏览器方案

opera浏览器中也有与webkit类似的私有方案。

.last-line { 
    height: 3.6em; /* exactly three lines */ 
    text-overflow: -o-ellipsis-lastline; 
}

Clamp.js方案

最有就是Clamp.js,这种方案跨浏览器的方案,当然使用js,显得略重,这个需要权衡。

var module = document.getElementById("clamp-this-module"); $clamp(module, {clamp: 3});  

最好用在p标签上。

在此还有Clamp.js的替代方案

———

上述基本属于翻译下面的两篇文章。

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus