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博客

相关推荐
dy1717几秒前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5