如何实现固定宽文本截断并显示换行的Tooltip提示？

问题核心在于：当你给容器设置white-space: nowrap + overflow: hidden + text-overflow: ellipsis实现单行截断时，容器内的文本会被强制转为单行，Tooltip如果直接读取这个容器的内容，自然只能拿到单行文本；而关闭overflow后，文本恢复换行，但截断效果失效。

下面是两种可靠的解决思路：

方案1：Tooltip直接绑定原始完整文本 #

截断容器负责显示省略版，Tooltip直接使用未被处理的原始带换行文本，两者互不干扰。以Vue + Element UI为例：

<el-tooltip :content="originalMultiLineText" placement="top" effect="dark">
  <div class="truncate-container">
    {{ originalMultiLineText }}
  </div>
</el-tooltip>

<style>
.truncate-container {
  max-width: 300px; /* 你的固定最大宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

如果原始文本包含\n换行符，需要让Tooltip支持解析换行：开启Tooltip的HTML内容模式，把换行符替换为<br>：

<el-tooltip 
  :content="originalMultiLineText.replace(/\n/g, '<br>')" 
  placement="top" 
  effect="dark"
  :raw-content="true"
>
  <div class="truncate-container">
    {{ originalMultiLineText }}
  </div>
</el-tooltip>

方案2：用独立元素承载Tooltip的多行文本 #

通过Tooltip的插槽传入一个独立的文本元素，给这个元素设置保留换行的样式，截断容器仍保持原有截断逻辑：

<el-tooltip placement="top" effect="dark">
  <template #content>
    <span class="tooltip-full-text">{{ originalMultiLineText }}</span>
  </template>
  <div class="truncate-container">
    {{ originalMultiLineText }}
  </div>
</el-tooltip>

<style>
.truncate-container {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tooltip-full-text {
  white-space: pre-line; /* 自动识别文本中的换行符并换行 */
  max-width: 400px; /* 可选：给Tooltip文本设置最大宽度，避免过宽 */
}
</style>

关键注意事项 #

• 截断容器的white-space: nowrap是单行截断的核心，不要移除，否则截断效果会失效；
• Tooltip的文本容器必须避免继承white-space: nowrap样式，通过pre-line或pre-wrap确保换行生效；
• 若使用原生JS实现Tooltip，同样要保证Tooltip的弹出层文本容器样式不包含强制单行的属性，同时正确处理文本中的换行符。

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