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属性控制截取文本行数,上述值为两行。

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku