web前端

文本截断

网页在显示长文本信息时，由于文本过长，常常需要对长文本进行截断，并且显示省略号，达到页面信息展示和美观的双重效果。

HTML结构如下：

<p class="text-slice">
    郑成月的经历就是一部中国社会历史！很有价值的！不管是社会研究还是真心纠错，都是非常好的案例。历史就是用各种个人经历写成的，那样就很有实在感。作家们没有素材？都在书写歌功颂德之文？想要把自己的作品流传后世，这就是最好的素材
</p>
<label class="expand-more">更多</label>

CSS样式如下：

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

Hint: -webkit-line-clamp CSS 属性 可以把块容器中的内容限制为指定的行数

实现效果如下：

此时，还需要点击“更多”出现完整文本的效果。有三种解决方案：

• JavaScript方法

• CSS: :target伪类

• CSS：:checked伪类 和 ~选择符

JavaScript方法

HTML结构修改：

<p class="content text-slice"> <!-- 新增 content 类 -->
    郑成月的经历就是一部中国社会历史！很有价值的！不管是社会研究还是真心纠错，都是非常好的案例。历史就是用各种个人经历写成的，那样就很有实在感。作家们没有素材？都在书写歌功颂德之文？想要把自己的作品流传后世，这就是最好的素材
</p>
<label class="expand-more">更多</label>

JavaScript逻辑：

$(function() {
    var $para = $('.content');
    var $more = $('.expand-more');
    $more.on('click', function() {
        $para.toggleClass('text-slice');
        if ($para.hasClass('text-slice')) {
            $more.html('更多');
        } else {
            $more.html('收起');
        }
    });
});

上面代码存在的问题是，在文本行数小于等于三行时，不显示“更多”和“收起”。可以想到两种解决方法：

• 计算文本字数，根据字数来判断是否需要显示“更多”和“收起”。

• 计算文本所在元素的高度，比较完整文本和截断文本的所在元素高度，若相等，则没有截断，否则，发生截断

其实，第一种解决方案是行不通的，因为涉及到不同的手机、不同的字符或者不同的浏览器，都会存在差异，难免会出现这样那样的问题。所以最好采用第二种方法。

改进

通过新增一个隐藏的class类，使用JavaScript对该类进行高度验证，如果在移除text-slice类后高度发生变化，说明存在文本截断。

HTML结构修改：

<p class="fake-content text-slice"> <!-- 新增 fake-content 类 -->
    郑成月的经历就是一部中国社会历史！很有价值的！不管是社会研究还是真心纠错，都是非常好的案例。历史就是用各种个人经历写成的，那样就很有实在感。作家们没有素材？都在书写歌功颂德之文？想要把自己的作品流传后世，这就是最好的素材
</p>
<label class="expand-more">更多</label>

新增CSS样式：

.fake-content {
    position: absolute;
    z-index: -1; /* 隐藏 */
    opacity: 0; /* 透明 */
    pointer-events: none; /*元素不可交互/点击*/
}

JavaScript逻辑修改：

// 文本是否发生截断
function hasTextSliced($ele) {
    var initHeight = $ele.height();
    var height;
    $ele.removeClass('text-slice');
    height = $ele.height();

    if (initHeight < height) {
        // 发生截断
        return true;
    }

    return false;
}

CSS: :target伪类

借用锚点来实现功能，a元素可以设置锚点，:target伪类又可以实时捕获锚点，具体见实现代码：

HTML结构：

<p class="content text-slice" id="content">
    ...        
</p>
<p class="fake-content text-slice">
    ...
</p>
<a class="expand-more" href="#content">更多</a>

CSS样式：

.text-slice {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
#content:target {
    overflow: auto;
    display: block;
}

CSS：:checked伪类 和 ~选择符

借用隐藏的选择框实现功能，label标签可以绑定到选择框元素上，当点击label标签，隐藏的选择框被选中，触发:checked伪类对应的样式，实现文本完整展现。

HTML结构：

<input type="checkbox" id="expand-check" style="display: none;pointer-events: none;">
<p class="content text-slice">
    ...
</p>
<p class="fake-content-2 text-slice">
    ...
</p>
<label class="expand-more" for="expand-check">更多</label>

CSS样式：

.text-slice {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
#expand-check:checked ~ .content {
    overflow: auto;
    display: block;
}

总结

JavaScript VS CSS

:target伪类 VS :checked伪类