el-tabs标签内容的宽度超出容器宽度时鼠标移入有内容提示

最新推荐文章于 2024-05-21 14:15:14 发布

爱心觉罗晓宇

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量706

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_44716001/article/details/131293714

版权

 <el-tab-pane

        v-for="(item, index) in tabList"

        :key="index"

        :label="item.label"

      >

      <el-tooltip slot="label" effect="dark" :content="item.label" placement="right-end">

          <span  class="hiddenTip">{{ item.label }}</span>

        </el-tooltip>

</el-tab-pane>

scss 样式如下
 .hiddenTip{
    width: 150px; /* 设置宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  display: inline-block;
  }

效果如下