Vue.js：如何在title中用HTML内容？hover时解析<br>换行

Hey there! Let's break down your two questions with practical solutions that work in real Vue projects:

1. 在Vue.js中使用HTML内容作为页面title #

First off, a quick heads-up: browsers only support plain text for the page <title> tag. If you try to stick HTML tags directly in there, they'll just show up as regular characters. But depending on what you actually need, here are two common fixes:

场景1：把HTML内容转成纯文本当title #

If you've got rich HTML content and want to strip out the tags for a clean title, use a simple utility function:

// Helper function to remove HTML tags
function stripHtml(html) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  return tempDiv.textContent || tempDiv.innerText || '';
}

// Vue 3 example
import { onMounted, watch } from 'vue';
export default {
  setup() {
    const htmlContent = '<h1>My <em>Awesome</em> App</h1>';
    
    onMounted(() => {
      document.title = stripHtml(htmlContent);
    });

    // Update title if the content changes dynamically
    watch(() => htmlContent, (newVal) => {
      document.title = stripHtml(newVal);
    });
  }
}

场景2：实现title的多行显示 #

If your HTML has <br> tags because you want the title to show up as multiple lines when users hover over the tab, just replace those <br>s with newline characters (\n):

// Vue 2 example
export default {
  data() {
    return {
      htmlTitle: 'Application Filed <br>April 2007'
    }
  },
  mounted() {
    document.title = this.htmlTitle.replace(/<br\s*\/?>/gi, '\n');
  }
}

Most browsers will recognize the \n and display the title on multiple lines.

2. 让hover提示里的<br>生效换行 #

The native title attribute doesn't parse HTML tags, so to make <br> actually create a line break in your hover tooltip, you've got two solid options:

方案1：用UI框架的自定义Tooltip组件（推荐） #

If you're using a Vue UI library like Element Plus or Ant Design Vue, their tooltip components support rendering HTML with v-html. Here's how it works with Element Plus's ElTooltip:

<template>
  <div v-for="item in dataList" :key="item.content">
    <ElTooltip placement="top">
      <template #content>
        <!-- Use v-html to render the HTML content -->
        <span v-html="item.content"></span>
      </template>
      <span>Hover over me!</span>
    </ElTooltip>
  </div>
</template>

<script setup>
const dataList = [
  { "content": "Application Filed <br>April 2007 - 0.0 Years from filing" },
  { "content": "Non-Final May 2009 - 2.06 Years from accident" },
  { "content": "Interview <br> August 2009 - 2.29 Years from accident" },
  { "content": "Final <br> November 2009 - 2.57 Years from accident" },
  { "content": "Request for Continuous<br>February 2010 - 2.82 Years from accident" }
];
</script>

This will correctly parse the <br> tags into line breaks in the tooltip.

方案2：手动处理原生title（无UI框架时） #

If you aren't using a UI library, just replace the <br> tags with \n and set that as the title attribute. Most modern browsers will display the line breaks:

<template>
  <div 
    v-for="item in dataList" 
    :key="item.content"
    :title="item.content.replace(/<br\s*\/?>/gi, '\n')"
  >
    Hover over me!
  </div>
</template>

<script setup>
const dataList = [/* Your data here */];
</script>

Note: Line break behavior might vary a tiny bit across browsers, but this works reliably for most cases.

内容的提问来源于stack exchange，提问作者vikash