css超出显示省略号

首先，行内元素是无法本文溢出的，只有块级元素可以文本溢出

如行内元素需要文本溢出，先行转换为块级元素

1. 单行文本溢出：

.text{
    /* 文本溢出 */
    white-space: nowrap;  /*不换行*/
    overflow: hidden;  /* 溢出隐藏 */
    text-overflow: ellipsis;  /* 超出显示省略号 */
    display: block;  /* 块级元素 */
}

2. 多行文本溢出：

.text{
    /* 多行文本溢出 */
    display: -webkit-box;  /* 块级元素 */
    overflow: hidden;  /* 溢出隐藏 */
    text-overflow: ellipsis;  /* 超出显示省略号 */
    -webkit-box-orient: vertical;  /* 垂直排列 */
    -webkit-line-clamp: 2;  /* 显示两行 */
}

-webkit-box-orient: vertical;  与 -webkit-line-clamp: 2;  缺一不可，否则无法实现