Vue用<br>自定义换行,用v-html渲染,hover的时候title也需要使用自定义换行或者显示一行用省略号展示,hover展示全部

哈喽 大家好啊,最近遇到一个需求:

**需求一:**用<br>自定义换行,hover的时候title也需要使用自定义换行

然后我便想到了用<br>自定义换行,然后用v-html渲染,则就正常显示了

但是title只能用文本,然后我百度到其他博主写的用\n可以实现title换行,然后我就用替换字符进行替换,以下是效果图和代码:

(一)实现效果

(二)实现代码:

javascript 复制代码
<div class="wrapClass"  v-html="content" :title="replaceStr(content)">
  
<div>

{
  data() {
      return {
         content:"hhhh<br>oooo<br>ddsssss<br>ssss"
      }
    },
    computed:{
    
    },
    created() {
     
    },
    methods: {
         replaceStr(str) {
           return str.replace(/<br>/g,"\n"); 
       }
    }
}

需求二:

显示一行用省略号展示,hover展示全部,然后自定义换行

相关代码:

javascript 复制代码
<div class="wrapClass" :title="content">
  {{replaceStr(content)}}
<div>

{
  data() {
      return {
         content:"hhhh\noooo\nddsssss\nssss"  // 原文用/n自定义换行,title就可以换行了
      }
    },
    computed:{
    
    },
    created() {
     
    },
    methods: {
         replaceStr(str) {
           return str.replace(/\n/g," "); // 将\n替换成空字符串
       }
    }
}

.wrapClass {
    white-space: nowrap; 让写的内容在一行显示,并不换行。 nowrap就是不换行的意思。
    overflow: hidden; 让写的内容部分的溢出部分隐藏。
    text-overflow: ellipsis; 让溢出的前一个文字显示省略...
}

(三)参考原文:

vue -- title属性换行_vue设置title换行-CSDN博客

正则替换字符串replace()方法超详细用法-CSDN博客

相关推荐
excel1 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着1 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友3 小时前
什么是API签名?
前端·后端·安全
会豪5 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子5 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶5 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子5 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_5 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark6 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23336 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts