单行文本溢出和多行文本溢出，如何加省略号

最新推荐文章于 2022-11-09 15:41:26 发布

远方的原

最新推荐文章于 2022-11-09 15:41:26 发布

阅读量285

点赞数 1

分类专栏： HTML与css 文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/qq_44890362/article/details/122360798

版权

HTML与css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS中实现单行和多行文本省略的技巧，通过`.single`和`.double`类展示了如何设置元素宽度、高度、背景颜色以及使用`white-space`、`text-overflow`和`overflow`属性来实现省略效果。示例代码中包含了HTML结构和对应的CSS样式，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.单行省略

        .single{
            width: 100px;
            height: 40px;
            background-color: aquamarine;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

2.多行省略

        .double {
            width: 100px;
            height: 45px;
            background-color: aqua;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            box-sizing: border-box;
        }

3.html结构

  <span>
        多行省略
    </span>
    <div class="double">滑动事件分布式代表分别大幅包围圈番茄网</div>
    <span>
        单行省略
    </span>
    <div class="single">是否合适大家好福建师大会肺结核</div>