css单行多行省略

单行省略：

display: inline-block;/*初始化display*/
width: 100%;/*inline-block需要指定宽度值100%,block，-webkit-box不需要*/
overflow: hidden;/*超出的总体：隐藏*/
text-overflow: ellipsis; /*超出文字：省略号*/
white-space: nowrap;/*单行省略，不换行*/
line-height:xx px;/*文字的上下两部分可能会被hidden，可以调整行高*/

多行省略：

display: -webkit-box;/*设置为box容器*/
-webkit-box-orient: vertical;/*规定框中的子元素应该被水平或垂直排列。*/
-webkit-line-clamp: 2;/*最多显示2行*/
overflow: hidden;/*超出的总体：隐藏*/
text-overflow: ellipsis; /*超出文字：省略号*/
word-break: break-all;/*英文单词换行,强制截断字符,任何元素都生效,可搭配word-wrap兼容*/
word-wrap: break-word;/*英文单词换行,当第二行可以放下这个字符时，不截断字符,行内元素不生效,可搭配兼容word-break*/
white-space: normal;/*默认值,换行符会当成空白符，合并所有空白符 <br>才换行*/
line-height:xx px;/*文字的上下两部分可能会被hidden，可以调整行高*/

1. display:webkit-box

display:box 是废弃的弹性盒子标准，已被flex代替，所以需要webkit前缀让浏览器识别，使用它的line-clamp属性，这是flex没有的。

2. webkit-box-orient

目前没有浏览器支持 box-orient 属性，规定框中的子元素应该被水平或垂直排列。

Firefox 支持替代的 -moz-box-orient 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

3. -webkit-line-clamp

-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数。

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果