CSS内容过多保留固定字数并显示省略号

最新推荐文章于 2024-07-26 08:00:00 发布

打小就霸

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量499

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_46183499/article/details/134160546

版权

一、业务场景：
详情内容过多时，会使布局错乱，需要保留固定的字数，鼠标划上显示出全部内容
在这里插入图片描述

三、具体实现步骤：

          <a-tooltip>
                <template slot="title">{{lastChe}}</template>
                <span class="ellipsis">{{lastChe||'—'}}</span>
              </a-tooltip>

  .ellipsis {
    word-break:break-all;      
    white-space:nowrap;       
    overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    width: 140px;
    display: block;
  }

四、效果展示：

在这里插入图片描述