上次分享了一篇《HTML中超出文本使用省略号替代的CSS编写方式》,之后有朋友反馈这个方法是针对一行文本截取的,如果想要实现两行文本甚至多行文本截取的话应该怎么办呢?
HTML超出文本多行截取
具体效果如下:
该效果无法用CSS很好地实现,遂用JS尝试实现了一下,可以针对N行进行截取,下面佚站互联跟大家分享一下代码。
HTML:
<div class="zan-text-1">
<p>
佚站互联以建设展示型网站为起点,结合创新理念与进取精神,为创造个人、企业、组织与社会之间的信息平台,让更多人能够方便快捷地传递信息而努力。
</p>
</div>
<div class="zan-text-2">
<p>
佚站互联以建设展示型网站为起点,结合创新理念与进取精神,为创造个人、企业、组织与社会之间的信息平台,让更多人能够方便快捷地传递信息而努力。
</p>
</div>
CSS:
.zan-text-1 {
color: #FFF;
background: #000;
width: 410px;
height: 22px;
}
.zan-text-2 {
color: #FFF;
background: #000;
width: 410px;
height: 44px;
}
p {
line-height: 22px;
}
JS(引入jQuery):
$("div[class*='zan-text']").each(function(e){
var divHeight = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divHeight) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
通过上述代码可以发现,实现这个效果的主要原理在于通过子容器(p)与父容器(div)高度的比较根据正则表达式进行字符截取,直到两者相等为止。
所以控制截取行数的关键自然在div高度上了。
另外分享一个非常简洁方便的实现方式,不过遗憾的是该方法只在webkit内核的浏览器下有效。
<p>
佚站互联以建设展示型网站为起点,结合创新理念与进取精神,为创造个人、企业、组织与社会之间的信息平台,让更多人能够方便快捷地传递信息而努力。
</p>
p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
其中-webkit-line-clamp属性控制截取文本行数,上述值为两行。
如果您有更好的实现方式,欢迎分享探讨。
发表回复