html+css:

<div id="textInfos" style="
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;">
脫離文件流:就不佔據空間了？ 是的，一個元素脫離文件流後，其他的元素在定位時候回當做沒看見他，兩者位置

重疊都是可以的。 2、脫離文件流不是從dom樹中脫離，用瀏覽器的審查元素可以看到脫離文件流的元素，依然會

出現在dom樹裡 3、實質：   脫離文件流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會

當做脫離文件流的元素不存在而進行定位。需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，

但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。而對於使用absolute positioning脫離文件流的

元素，其他盒子與其他盒子內的文字都會無視它。
</div>
<input type="button" id="showText" value="顯示更多" />
 

js:

  <script>
        var isShow = true
        document.getElementById('showText').onclick = function () {
            if (isShow) {
                isShow = false
                this.value = "顯示"
                document.getElementById('textInfos').style.display = "-webkit-box"
            } else {
                isShow = true
                this.value = "隱藏"
                document.getElementById('textInfos').style.display = ""
            }
        }
    </script>