移动端文本超出设定行数后省略的方法

Posted 2020-09-13 nealXue

因为移动端绝大部分是WebKit内核的浏览器，如果纯粹的要实现文本在超出规定行数后，其余内容省略并加上“...”，可以直接使用WebKit私有属性:-webkit-line-clamp来实现


css代码

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

html代码

<div class="box">001A航母的建成标志着中国成为世界上少数几个可以独立建造航母的国家，由于中国处在快速发展蓝水海军的进程中，在不远将来中国拥有多支航母编队是可以预期的，中国建设强大海军的帷幕真正拉开了。</div>

那如果还需要有一个展开全部和收起的操作，那光用css是无法实现的。

这边推荐一个比较成熟的jQuery插件-jQuery.dotdotdot 下载地址

首先引入jquery.js和dotdotdot.js

html代码

<div class="dotbox">
　　001A航母的建成标志着中国成为世界上少数几个可以独立建造航母的国家，由于中国处在快速发展蓝水海军的进程中，在不远将来中国拥有多支航母编队是可以预期的，中国建设强大海军的帷幕真正拉开了。
</div>

css代码

.dotbox.opened {height: auto;}/*展开后容器高度自适应*/
.dotbox .close,.dotbox .open,.dotbox.opened .open {display: none;}/*默认展开收起按钮隐藏，展开时展开按钮隐藏*/
.dotbox.is-truncated .open,.dotbox.opened .close {display: inline-block;}/*超出规定行数展开按钮显示，展开后收起按钮显示*/
.dotbox{line-height: 18px;height:36px;color: #333;}
.more-btn{display:block;color: #333;line-height: 18px;}
.toggle{display:block;}

js代码

<script type="text/javascript">
    $(function(){
        var $dot = $(‘.dotbox‘);
        $dot.append(‘<a class="toggle"><span class="more-btn open">查看全部</span><span class="more-btn close">收起</span></a>‘);
        function createDots() {
            $dot.dotdotdot({
                after: ‘a.toggle‘
            });
        }

        function destroyDots() {
            $dot.trigger(‘destroy‘);
        }
        createDots();
        $dot.on(
            ‘click‘,
            ‘a.toggle‘,
            function() {
                $dot.toggleClass(‘opened‘);
                if ($dot.hasClass(‘opened‘)) {
                    destroyDots();
                } else {
                    createDots();
                }
                return false;
            }
        );
    })
</script>