css 显示省略号和动态显示省略号

原创于 2023-06-29 15:57:54 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

文章标签：

通过CSS样式，可以实现文本超出固定宽度时显示省略号的效果。基本方法包括设置width、overflow、white-space和text-overflow属性。对于更复杂的情况，如在省略号后仍有内容，可以将宽度设为父容器，并使子元素display为inline-block，以实现动态省略号功能。

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

省略是非常常见的功能。

简单的实现省略号

下面的代码就可以实现省略号，超过宽度的时候就会出现省略号

            .text-name{
              //宽高是一定要设置的不然是会无效延伸的
              width: 200rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

稍微复杂点的情况（动态显示省略号）

如果省略号的右边还有内容，因为宽度是固定的，就会出现中间有空白的情况，而且时大时小。这时候把宽度设置到父容器上，并且设置子组件display: inline-block;就可以实现动态显示省略号的功能。

          .text-account {
            width: 380rpx;
            .text-name{
              //宽高是一定要设置的不然是会无效延伸的
              display: inline-block;
              //width: 200rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }