CSS单/多行文本溢出省略号

在展示一段简介等场景下，文字内容很长，只想展示一行文字 或者 两三行文字信息，多余的展示省略号（...），由用户主动点击文字再进入详情页看完整介绍，此时就会用到单/多行文本溢出省略号。

单行文本溢出样式

overflow: hidden;
white-space: nowrap; /* 指定元素内的空白怎样处理；nowrap-不换行； */
text-overflow: ellipsis; /* 指定当文本溢出包含它的元素时，应该如何显示；ellipsis-显示省略符号 ... 来代表被修剪的文本 */
display: block; /* 为什么要多加一个display：bolck？因为overflow：hidden是作用于块级元素上的，而我们当前加样式的标签是行内元素上的，所以要将行内元素转为块级元素才会生效。  */

eg：

多行文本溢出样式

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; /* 多行要基于webkit盒模型 */
    -webkit-box-orient: vertical; /* 设置对齐方式 virtical：垂直的； */
    -webkit-line-clamp: 2; /* 设置多行行数 */

eg：