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

本文链接：https://blog.youkuaiyun.com/m0_59157023/article/details/135013073

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

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

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

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

（一）实现效果

（二）实现代码：


<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展示全部，然后自定义换行

相关代码：


<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; 让溢出的前一个文字显示省略...
}