html中隐藏超出文本的方法

利用了三个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;/**隐藏超出的内容**/