<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
设置或检索伸缩盒对象的子元素的排列方式 。