多行文本省略，js点击显示更多

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>