如何用CSS/HTML解决使用white-space: pre-line时的额外空白问题

可行解决方案（按实现成本从低到高排序） #

方案1：动态内容直接加trim()处理（最适配你的场景）

你的文本本身来自i18n和后端接口，属于动态渲染内容，只需要在渲染时对输出内容做一次首尾trim即可，trim只会移除文本首尾的换行、空格，不会影响内容中间自带的\n换行符，完全兼容white-space: pre-line的功能：

<!-- i18n 文本 -->
<h4>
  {{ $t('your.i18n.key').trim() }}
</h4>

<!-- 后端返回文本 -->
<h4>
  {{ backendContent.trim() }}
</h4>

方案2：局部禁用Prettier格式化

无需全局关闭Prettier，只需要在有问题的标签上方加prettier-ignore注释，Prettier就会跳过这部分代码的格式化，你可以直接把内容和标签写在同一行：

<!-- prettier-ignore -->
<h4>Lorem ipsum sit dolores</h4>

方案3：全局自定义指令统一处理

如果同类场景很多，可以封装一个全局Vue自定义指令，自动清除元素文本首尾的空白，不需要每个地方都手动加trim：

1. 先在Nuxt项目里注册全局指令，新建plugins/trimText.client.js：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('trim-text', {
    // 元素挂载和内容更新时都执行一次trim
    mounted(el) {
      el.textContent = el.textContent?.trim() || ''
    },
    updated(el) {
      el.textContent = el.textContent?.trim() || ''
    }
  })
})

2. 直接在需要处理的标签上使用即可：

<h4 v-trim-text>
  Lorem ipsum sit dolores
</h4>

方案4：CSS兼容方案（无需修改JS/模板）

如果不想修改业务代码，可以用CSS伪类抵消头部的空白行，缺点是如果文本真实首行的缩进有特殊要求会受影响：

h4 {
  border: 1px solid goldenrod;
  white-space: pre-line;
}
/* 抵消首行的额外空行 */
h4::first-line {
  margin-top: -1em;
  display: inline-block;
}

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