利用了三个style:overflow,text-overflow,white-space
再加上一个宽度可以使超出宽度的内容变为…
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 50px;
意思为超出50px显示…
<p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width: 50px;">超出宽度的部分会被隐藏(显示为...)不信你就试一下</p>
效果图
将width改为200px则显示
word-break:break-all;
display:-webkit-box;/**对象作为伸缩盒子模型展示**/
-webkit-box-orient:vertical;/**设置或检索伸缩盒子对象的子元素的排列方式**/
-webkit-line-clamp:3;/**显示的行数**/
overflow:hidden;/**隐藏超出的内容**/