活动条美化，隐藏标签文字显示指定行数

最新推荐文章于 2025-12-04 00:13:33 发布

原创最新推荐文章于 2025-12-04 00:13:33 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

本文探讨了如何通过CSS增强网页滚动条样式，并展示了如何使用文本溢出属性隐藏多余文字，仅显示指定行数，提升网页内容呈现的视觉效果。

滚动条美化

// 滑动块样式
    &::-webkit-scrollbar-thumb{
        background-color: #eaecf1;
        border-radius: 3px;
    }
    &::-webkit-scrollbar{
        width: 8px;
    }

美化后
在这里插入图片描述
美化前

隐藏多余文字，显示指定行数

<div class="goods-title">	
G2000男装 2021春季新款青年潮流休闲口袋时尚撞色拼接简约圆领短袖t恤男1</div>

.goods-title {
    display:-webkit-box;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;   // 要显示的行数
  }

在这里插入图片描述