如何使用 CSS 或 HTML 消除额外白色 space 的问题？

Question

我正在 Nuxt/Vue 开发应用程序，我的文本来自 i18n，一些文本在 \n 中有正则表达式换行符，如果我想正确显示它，我不得不使用 CSS white-space: pre-line 属性但是当我这样做时，prettier 在格式化代码期间创建的每个输入都会在任何元素之前添加额外的行（只有 span 可以正常工作）但在这种情况下我需要 <h4>元素.

<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

是否有机会从渲染中移除这个额外的白色 space 并完全正常工作 white-space: pre-line 属性？

编辑

我知道这行得通（我已将其添加到示例中）：

<h4>Lorem Ipsum sit Dolores</h4>

我被迫使用pre-line因为有些文字来自BE，里面有一些断行
Prettier 不允许我在一行中格式化它，我无法禁用 prettier。 Prettier 自动将文本转发到新行

h4 {
  border: 1px solid goldenrod;
  white-space: pre-line;
}

<h4>
  Lorem ipsum sit dolores
</h4>

<h4>Lorem ipsum sit dolores</h4>

Answer 1

解决方案 1：您可以像这样制作 prettier ignore 特定标签：

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

解决方案 2：另一种可能有效的 hacky 方法（未经测试）。我认为在这种情况下 prettier 不会对齐标签。

h4 {
  white-space: pre-line;
  border: 1px solid goldenrod;
}

h4::after {
  content: "This is a title";
}

<h4></h4>

Answer 2

我找到了另一个解决方案。简单地说，如果你不想禁用更漂亮，你可以用 span 包装你的文本，一切都很完美。

h4 {
  border: 1px solid goldenrod;
}
h4 span {
  white-space: pre-line;
}

<h4>
  <span>Lorem ipsum sit dolores</span>
</h4>

<h4>Lorem ipsum sit dolores</h4>

如何使用 CSS 或 HTML 消除额外白色 space 的问题？

How to remove issue with extra white space using CSS or HTML?

html

css

prettier