单行文本超出或多行文本超出显示省略号...

最新推荐文章于 2025-05-26 10:41:41 发布

Mount华

最新推荐文章于 2025-05-26 10:41:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/weixin_40811829/article/details/88574178

CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用CSS实现单行或多行文本超出部分的优雅隐藏，包括white-space、text-overflow、overflow属性的组合使用，以及-webkit-line-clamp等属性在多行文本隐藏中的应用。

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

单行文本超出隐藏

css样式中必须同时设置：
white-space: nowrap; //不换行
text-overflow: ellipsis;
overflow: hidden;

    <h3>单行文本超出隐藏</h3>
    <div class="single">
        This is a sad story. Tell me your name and address.
    </div>

   .single{
       width: 200px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       border: 1px solid black;
   }

演示：
单行文本

多行文本超出隐藏

这里以3行为例做演示：

css样式中必须同时设置：
display: -webkit-box;
-webkit-line-clamp: 3; //设置显示3行
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

    <h3>多行文本超出隐藏</h3>
    <div class="multiple">
        This is a sad story. Tell me your name and address.
        This is a sad story. Tell me your name and address.
        This is a sad story. Tell me your name and address.
    </div>

    .multiple{
        display: -webkit-box;
        -webkit-line-clamp: 3;              
        -webkit-box-orient: vertical;
        width: 300px;
        height: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid black;
        line-height: 30px;
        padding: 0 10px;
    }

演示：
多行文本