CSS实现溢出显示省略号

最新推荐文章于 2025-06-24 09:47:52 发布

原创

最新推荐文章于 2025-06-24 09:47:52 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

这篇博客介绍了前端开发者如何使用CSS实现文本溢出时显示省略号的效果，包括单行、多行以及内容中间显示省略号的多种方法，并给出了相应的HTML和CSS代码示例。

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

小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~

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

效果图：

实现代码:

HTML部分

<h3>使用css实现单行省略号</h3>
<div class="box1">
    <a href="#" class="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ipsaexplicabo quos sapiente ea error, mollitia necessitatibus animi facere rem non sed velit aperiam laboriosamdebitis. Quae deleniti doloremque nisi.
    </a>
</div>

CSS部分

h3 {
    padding-left: 10px;
    }
.a1 {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    } 
.box1 {
     height: 40px;
     line-height: 40px;
     background-image: linear-gradient(white, gray);
     box-shadow: 0 0 2px 2px rgb(148, 145, 145);
     box-sizing: border-box;
     /* 单行显示省略号 */
     overflow: hidden;
     text-o