在 Vue 中保留 <span> 之间的空格

Question

在我的 Vue 3 应用程序中，我想突出显示文本中的单词，例如以下 HTML：

span {
  background-color: yellow;
}

<span>foo</span> 
<span>bar</span> 
baz 
qux

不过，Vue 去掉了标签之间的空白，所以<span>s 之间的空白消失了：

span {
    background-color: yellow;
}

<span>foo</span><span>bar</span> baz qux

如何保留<span>s 之间的空格？ 我不能使用 ，因为空格会中断，而且other white space entities 的大小都与通常的空格不一样。

Answer 1

您可以通过white-space CSS Property 或pre html element 控制元素中空格的行为。您可以在您的情况下选择pre html 元素，因为您没有针对空白行为的任何其他特殊配置。

<pre><span>foo</span> 
<span>bar</span> 
baz 
qux
</pre>

Answer 2

好吧，显然，我不是第一个偶然发现这种行为的人，我将其命名为错误：

https://github.com/vuejs/vue-next/pull/1600

默认情况下，Vue 会出于压缩目的删除元素之间的空格——浏览器除外，浏览器会将此类空格减少为单个空格。在 Vue 2 中，可以更改配置以保留空格。在 Vue 3 中，这是不可能的（目前）。

但是，有一些解决方法，正如评论 [1] 中提到的，只有在包含换行符时才会删除空格。因此，通过删除上面示例源代码中的换行符，sn-p 的行为符合预期：

<span>foo</span> <span>bar</span> 
baz
qux

[1]https://github.com/vuejs/vue-next/pull/1600#issuecomment-747162894

Answer 3

IMO 这完全是一个错误，因为：

1. 原生 html 的行为方式不同。
2. the documentation 该行为应默认保留空白。
3. vue 2 没有这个问题。

有一个名为whitespace的vue compilerOptions选项，根据the documentation应该默认为'preserve'，但事实并非如此。

要在 webpack 中将其设置为 'preserve'，请使用以下配置：

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        compilerOptions: {
            // preserve is supposed to be the default
            // see: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options
            // but as of 2022-01-13 (vue 3.2.26)
            whitespace: 'preserve',
        },
    },
},

或者，如果您正在动态渲染组件（使用 dom 模板），请使用：

const app = Vue.createApp({...});
app.config.compilerOptions.whitespace = 'preserve';
app.mount('#app');

文档（撰写时）：

whitespace

• 类型：字符串
• 有效值：“保留”| '浓缩'
• 默认值：“保留”

默认值'preserve' 处理空格如下：

• 元素标签之间的纯空格文本节点被压缩成一个 单个空格。
• 所有其他空格按原样保留。

如果设置为'condense'：

• 元素标签之间的纯空格文本节点被删除，如果它 包含新行。否则，它会被压缩成一个空间。
• 非纯空格文本节点内的连续空格是 浓缩成一个空间。

使用压缩模式会导致 更小的编译代码大小和略微提高的性能。然而， 与纯 HTML 相比，它将产生较小的视觉布局差异 在某些情况下。