多行文本，超出部分省略号显示

    <style>
        p {
            font-size: 36px;
            height: 96px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            word-break: break-all;
            -webkit-box-orient: vertical;
        }
    </style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate hic odit nisi quo excepturi laudantium? Delectus reiciendis unde atque, voluptate commodi saepe animi, ex repudiandae, recusandae dolor dolorem cum quisquam.</p>

效果图：

 

 

属性说明：

-webkit-line-clamp 一个不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。

　　　　　　　　　　为了实现该效果，它需要组合其他外来的WebKit属性。

常见结合属性：

display: -webkit-box  将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient    设置或检索伸缩盒对象的子元素的排列方式 。