el-tooltip 提示样式修改,解决el-tooltip__popper设置宽度无效问题

在这里插入图片描述

<el-table-column label="描述" width="200" align="left" prop="description">
        <template v-slot="scope">
          <el-tooltip
            class="item ellipsis"
            effect="dark"
            placement="top"
            :content="scope.row.description"
            popper-class="tooltipLines"
          >
            <div>
              {{ scope.row.description }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
<style scoped>
.ellipsis {
  white-space: wrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
  width: 180px; /* 设置元素宽度,根据需要调整 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: justify;
}
</style>
<style lang="css">
.el-tooltip__popper {
  max-width: 40%;
}
</style>

https://blog.youkuaiyun.com/qq_51657072/article/details/124267624

### 如何设置 `el-tooltip` 的最大宽度并实现文本换行 在 Element UI 中,为了使 `el-tooltip` 实现特定的最大宽度并且让内部文字能够正常换行,可以通过自定义样式来达到这一目的。对于 `el-tooltip` 组件而言,默认情况下其内容不会自动换行而是保持单行显示直到超出容器边界才会被截断。 当希望控制提示框大小及其中的文字布局时,可以在应用此组件的同时附加内联样式或是通过 CSS 类来进行更细致化的调整[^1]: #### 方法一:使用内联样式 可以直接给 `<el-tooltip>` 添加 `style` 属性指定宽高,并利用 `word-break` 和 `white-space` 来管理文本行为。 ```html <template> <div> <!-- 使用 style 直接设定 --> <el-tooltip effect="dark" :content="'这是一条很长的信息...'" placement="top"> <span style="max-width: 200px; display: inline-block; word-break: break-all;"> 鼠标悬停查看完整信息 </span> </el-tooltip> </div> </template> <script setup lang="ts"></script> ``` #### 方法二:创建全局或局部的CSS类 这种方法更加灵活通用,允许重复应用于多个地方而无需每次都写相同的样式代码。 ```css /* 定义一个名为 tooltip-content 的 css class */ .tooltip-content { max-width: 200px; white-space: normal !important; word-wrap: break-word; } ``` 接着,在模板里引用这个类名即可: ```html <template> <div> <!-- 应用之前定义好的 .tooltip-content 样式 --> <el-tooltip effect="dark" content-class="tooltip-content" :content="'这里有一段非常长的内容...'" placement="right"> <button type="button">鼠标悬浮在这里</button> </el-tooltip> </div> </template> ``` 上述两种方式都可以有效地解决 `el-tooltip` 显示区域过窄导致的内容溢出问题,并且能够让较长的消息按照预期的方式折行展示出来[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值