单行文本溢出

<div class="box">
  <div class="text">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>


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

多行文本溢出

<div class="box">
    <div class="text">
        时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间
    </div>
</div>


.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;
    }
}