移動端文本超出設定行數后省略的方法

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

<div class="box">001A航母的建成標志著中國成為世界上少數幾個可以獨立建造航母的國家，由于中國處在快速發展藍水海軍的進程中，在不遠將來中國擁有多支航母編隊是可以預期的，中國建設強大海軍的帷幕真正拉開了。</div>

<div class="dotbox">
　　001A航母的建成標志著中國成為世界上少數幾個可以獨立建造航母的國家，由于中國處在快速發展藍水海軍的進程中，在不遠將來中國擁有多支航母編隊是可以預期的，中國建設強大海軍的帷幕真正拉開了。
</div>

.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;}

<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>