CSS基础： 单行和多行文本溢出显示省略号

文本溢出后很多，会显示一些省略号，这个在很多网站都会这样做，从技术层次来分析有两种，一种是前端通过css或者JavaScript进行进行，还有一种是后端传递文字的时候，本身处理完长度，然后返回一个嗲有省略号的文字。

单行文本溢出

如果解决文本溢出显示省略号，需要满足的三个条件：

先强制一行内显示文本

white-space:nowrap;/*默认normal 自动换行*/

超出的文本隐藏起来。

overflow:hidden;

文本省略部分替代超出的部分

text-overflow:ellipsis; /*默认是clip 超出部分直接切除*/

多行文本溢出

多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit’浏览器火移动端（移动端大部分是webkit内核。）

上面的原因也是为什么不建议在前端通过CSS进行设置，而是要求后台返回的数据就是带有省略号的规定内容。

隐藏超出部分

overflow:hidden;

弹性伸缩盒子模型显示：

display：-webkit-box;

限制一个块元素显示的文本行数

-webkit-line-clamp:2;

设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient:vertical;