如何在Vuetify v-tooltip组件中实现提示文本换行

问题根因 #

Vuetify 的 <v-tooltip> 组件默认给内部提示内容容器设置了 white-space: nowrap 样式，强制所有提示内容单行展示，这也是之前尝试用 \n 转义字符、<br> 标签始终无法实现换行的核心原因——并非转义字符或标签失效，是外层默认样式覆盖了换行效果。

具体实现方法 #

• 覆盖默认的强制不换行样式
  通过组件提供的 content-class 属性绑定自定义样式类，由于 tooltip 的渲染节点会挂载到 body 下，scoped 作用域的样式无法直接命中，需要在全局样式或者通过深度选择器编写对应规则：

  <v-tooltip content-class="multi-line-tooltip">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">button</v-btn>
    </template>
    <!-- 支持用<br>标签强制指定换行位置 -->
    <span>
      First line <br /> second line
    </span>
  </v-tooltip>
  

  对应样式配置：

  .multi-line-tooltip {
    /* 覆盖默认的不换行规则 */
    white-space: normal;
    /* 可按需设置最大宽度，避免换行后内容过宽 */
    max-width: 240px;
  }
  

• 兼容 \n 转义字符的换行写法
  如果希望直接在文本中写 \n 实现换行，不需要额外加 <br> 标签，只需要将自定义类的样式调整为 white-space: pre-line 即可：

  .multi-line-tooltip {
    white-space: pre-line;
    max-width: 240px;
  }
  

  这种配置下，直接写 <span>First line \n second line</span> 就可以被正常解析为换行效果，不会被合并为单行。

常见踩坑提示 #

• 不要直接把换行样式写在当前组件的 scoped 样式里，由于 tooltip 是挂载在 body 下的 teleport 节点，scoped 的属性选择器无法匹配到目标元素，会出现样式不生效的问题。
• 如果需要保留文本中的连续空格、缩进格式，可以将 white-space 属性设置为 pre-wrap，适配更丰富的文本排版需求。

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