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

最新推荐文章于 2024-05-07 14:55:18 发布

开心点啦.

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量571

点赞数 10

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/zxcvb0825/article/details/134802945

版权

单行文本溢出

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