html中隐藏超出文本的方法

利用了三个style:overflow,text-overflow,white-space
再加上一个宽度可以使超出宽度的内容变为…

overflow: hidden; 
text-overflow: ellipsis;
 white-space: nowrap;
 width: 50px;

意思为超出50px显示…

 

超出宽度的部分会被隐藏(显示为...)不信你就试一下

效果图
html中隐藏超出文本的方法_第1张图片
将width改为200px则显示
html中隐藏超出文本的方法_第2张图片

word-break:break-all;
display:-webkit-box;/**对象作为伸缩盒子模型展示**/
-webkit-box-orient:vertical;/**设置或检索伸缩盒子对象的子元素的排列方式**/
-webkit-line-clamp:3;/**显示的行数**/
overflow:hidden;/**隐藏超出的内容**/

你可能感兴趣的:(html,html文本隐藏)