CSS文字省略号

一、单行超出显示省略号
如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；

详细步骤：

第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略）
第二步（溢出隐藏）overflow:hidden;
第三步（文本溢出显示省略号）text-overflow：ellipsis;(省略号）

 

 二、多行超出显示

 

省略号

对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式；

 

溢出隐藏：overflow: hidden;

省略号：text-overflow: ellipsis; display: -webkit-box;

弹性盒模型：

设置弹性盒子的子元素的排列方式 ：-webkit-box-orient: vertical;

设置显示文本的行数：-webkit-line-clamp: 5; (最多显示5行)