el-tooltip 使用 \n 换行的情况显示

青云ovo

已于 2023-10-31 11:05:22 修改

阅读量1.4k

点赞数 5

文章标签： vue.js javascript 前端 elementui

于 2023-10-31 11:04:38 首次发布

本文链接：https://blog.csdn.net/wwngxu/article/details/134135808

版权

代码如下： str = 'aaaqqqqqqqqqqqqqqqqqq\nwwwwwwwwwwwwwwwwwwwwwwwwvvvvvvvv'

<el-tooltip placement="top">
     <div v-html="str" slot="content" style="white-space: pre-line"></div>
     <el-button type="text" size="mini" icon="el-icon-paperclip">附件</el-button>
</el-tooltip>

使用el-tooltip的插槽 slot="content" 然后通过v-html 渲染字符串最后添加 white-space: pre-line 即可实现 el-tooltip 换行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青云ovo

关注关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
el-tooltip 使用 \n 换行的情况显示

el-tooltip 使用 \n 换行的情况显示
复制链接

扫一扫

VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

12-29

ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？... tooltip-effect=dark > <template v-for=(item,index)> <el-table-c

【Element UI】el-tooltip组件（提示消息）悬浮框宽度和内容换行设置

m0_67841039的博客

07-18

6200

【Element UI】el-tooltip组件（提示消息）悬浮框宽度和内容换行设置

1 条评论您还未登录，请先登录后发表或查看评论

elementUI中table列表中的tooltip内容换行

南栀@的博客

11-01

1517

具体思路：使用slot自定义el-tooltip内容 v-html指令转义删除 show-overflow-tooltip属性或设置为false，否则页面出现两个近乎重叠的tip 后端返回数据，使用正则表达式进行处理 <el-table-column label="重点事项" prop="keyMatter" :show-overflow-too.

elementui el-tooltip文字提示组件弹出层内容格式换行处理

最新发布

DarlingYL的博客

05-30

1163

【代码】elementui el-tooltip文字提示组件弹出层内容格式换行处理。

vue3+ts之el-tooltip换行显示内容

leng0920的博客

05-08

341

vue3+ts之el-tooltip换行显示

el-tooltip内容换行显示

leng0920的博客

09-27

982

el-tooltip内容换行显示

el-tooltip中文字如何换行

qq_42931285的博客

07-13

8816

el-tooltip中文字换行

vue3中如何使用el-tooltip中的插槽达到换行效果

weixin_56733569的博客

08-31

2106

vue3中如何使用el-tooltip中的插槽达到换行效果

vue Tooltip提示动态换行问题，间隔指定字符数换行

上好佳的博客

06-01

2336

使用element 组件el-table，表格某一列字段过长，采用el-tooltip进行提示，但提示中的内容过长不能换行展示。

elementUI Tooltip换行

xuelong的博客

01-29

944

vue项目中使用elementUI，遇到表格内容太长，使用 tooltip 后只显示一行，显示不全。要求换行显示。

v-title:辅助文字显示（如“ el-tooltip”）

05-12

辅助文本显示（如el-tooltip ）。用法安装 npm install --save v-title 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'v-title/lib/element-ui' ; 全球...

v-tooltip-使用Vue 2.x的简单工具提示。-Vue.js开发

05-27

v-tooltip使用Popper.js的便捷工具提示，弹出窗口和下拉菜单赞助商实时演示JSFiddle目录入门安装v-tooltip使用Popper.js的便捷工具提示，弹出窗口和下拉菜单赞助商有用的链接Live Demo JSFiddle目录入门指南用法指令...

v-tooltip:Vue 3的工具提示

03-20

然后使用app.directive全局添加v-tooltip自定义指令。它看起来应该类似于： import { createApp } from "vue" ;import App from "./App.vue" ;import tooltip from "./directives/tooltip.js" ;import "@/assets/...

element表格tooltip内容换行展示（本人第一次写帖子效果图在最后如果是各位想要的效果请点个赞，写的不好的地方也可以指导一下万分感谢）

csshtmlsb的博客

10-12

2151

elelemt表格tooltip内容换行展示

记录一下el-table的tooltip换行

xt_XiTu的博客

03-11

1023

一些需求场景下，需要保持el-table中tooltip出现的时机，并且当前代码编写时完全不能通过js控制tooltip禁用属性时，可以通过以下方法实现tooltip换行。1、对应单元格的 showOverflowTooltip 属性设置为true，tooltip出现时机依然使用组件原本的。2、监听中判断当前单元格宽度与内容实际宽度，当内容实际宽度 > 单元格宽度时，对应的tooltip设置为不禁用即可。2、对应单元格内容使用p标签展示，当前单元格依然可设置一行展示，tooltip中可以按照p标签换行。

表格中el-tooltip 实现换行展示

记录常见的问题以及解决办法

05-27

2114

效果 html代码 <el-table-column prop="workcontents" key="workcontents" label="label" align="center" ...

Vue3 el-tooltip 根据内容控制宽度大小换行和并且内容太短不显示

weixin_38992765的博客

09-04

2280

Vue3 el-tooltip 根据内容控制宽度大小换行和显隐

el-tooltip 显示文字换行

08-12

如果你想在 `el-tooltip` 中显示换行的文字，你可以通过设置 CSS 样式来实现。以下是一个示例： ```html <template> <div> <el-tooltip effect="dark" content="这是一个很长的文字，需要换行显示" placement="top"> <div class="tooltip-content">这是一个很长的文字，需要换行显示</div> </el-tooltip> </div> </template> <style> .tooltip-content { white-space: pre-wrap; /* 允许换行 */ } </style> ``` 在上面的示例中，我们在 `el-tooltip` 的 `content` 属性中设置了需要显示的文字内容，并在内部包裹了一个 `div` 元素，并给它添加了一个自定义的类名 `tooltip-content`。然后，在样式中，我们使用了 `white-space: pre-wrap;` 属性来允许文字换行。这个属性会保留文本中的空白字符，并根据需要进行换行。这样，当鼠标悬停在 `el-tooltip` 上时，文字内容就会显示并根据需要自动换行。希望这个示例能够帮助到你！如果有任何进一步的问题，请随时提问。