如何实现溢出文本省略号

最新推荐文章于 2025-05-13 17:44:16 发布

wmui

最新推荐文章于 2025-05-13 17:44:16 发布

阅读量357

点赞数

分类专栏：聚享小站文章标签： css css3 html

本文链接：https://blog.csdn.net/wxq1308017/article/details/123105409

版权

聚享小站专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用CSS和CSS3实现文本溢出时显示省略号的效果，包括单行和多行文本的处理方法，并提到了在scss中编写mixin的实践。虽然该属性非标准，但获得了主流浏览器支持。

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

背景

有时候为了页面美观，对于比较长的标题或简介内容，会希望溢出的内容用省略号代替。这么做虽然降低了用户体验，但是视觉上会比较整洁。

方案

单行文本溢出省略

  <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

  <style>
   .txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>

多行文本溢出省略

  <p class="txt2">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

<style>
  .txt2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 设置溢出行数 */
  }
</style>

20220223192711

如果在项目中使用了scss，可以编写一个mixin来处理

 @mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $line==1 {
        white-space: nowrap;
        word-wrap: normal;
    }

    @else {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $line;
    }
}