css单行/多行 超出部分多行文本溢出隐藏

单行文本溢出

  

    aaaaaaaaaaaaaaaaaaaaaaaaaaaa
  



.box {
    width: 100px;
    height: 50px;
    background-color: pink;
    .text {
        /* 文本溢出 */
        white-space: nowrap;
        /* 不换行 溢出隐藏 */
        overflow: hidden;
        /* 超出部分显示省略号 */
        text-overflow: ellipsis;
        /* 块级元素 */
        display: block;
    }
}

多行文本溢出

    

        时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间
    



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