css实现隐藏多余溢出文字并显示省略号

一、单行文本显示省略号

1.先强制文本一行内显示

white-space:nowrap(不换行);

2.超出部分影藏

overflow:hidden;

3.用省略号代替超出的部分

text-overflow:ellipsis;

二、多行显示省略号

注意：多行文本有较大兼容性问题适合webkit或者移动端

1.超出影藏

overflow:hidden;

2.用省略号代替超出的部分

text-overflow:ellipsis;

3.设置弹性伸缩盒子模型

display:-webkit-box;

4.限制在一个块级元素显示的文本行数

-webkit-line-clamp:2;

5.设置或检查伸缩对象的子元素的排列方式

-webkit-box-orient:vertical;

6.解决只有英文才能换行，中文不能换行

word-break:break-all;

查看更多关于css实现隐藏多余溢出文字并显示省略号的详细内容...