柠檬铺

HTML超出文本多行截取

—

由

柠檬铺
于

上次分享了一篇《HTML中超出文本使用省略号替代的CSS编写方式》，之后有朋友反馈这个方法是针对一行文本截取的，如果想要实现两行文本甚至多行文本截取的话应该怎么办呢？

具体效果如下：

该效果无法用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属性控制截取文本行数，上述值为两行。

如果您有更好的实现方式，欢迎分享探讨。