/*单行溢出*/
overflow: hidden;
-o-text-overflow: ellipsis;//最主要
text-overflow: ellipsis;//最主要
width: 90%;
display: block;
/*单行溢出*/
.one-txt-cut{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/*多行溢出 手机端使用*/
.txt-cut{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}
text-overflow 规定当文本溢出包含元素时的显示,有两个固定值,分别是clip和ellipsis,也可直接传字符串string:
clip :默认值 。不显示省略标记(…),而是简单的裁切;
ellipsis: 当对象内文本溢出时显示省略标记(…);
string:使用给定的字符串来代表被修剪的文本。
使用text-overflow:ellipsis时要注意一下两点:
1.overflow: hidden; text-overflow:ellipsis;white-space:nowrap;这三个一定要一起用,如果少了white-space:nowrap,文字会把撑高容器的高度,导致替换字符显示不出来;如果少了overflow: hidden,文字会横向撑到容器的外面;
2.一定要给容器定义宽度。
网友评论