时间戳

首页 > 解决方案 > 在 Vue 中保留 s 之间的空格

html - 在 Vue 中保留 s 之间的空格

问题描述

在我的 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 之间的空格？我不能使用&nbsp;，因为空格应该中断，并且其他空白实体都没有与通常空间相同的大小。

标签： htmlvue.jsvuejs3

解决方案

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

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

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

但是，有一些解决方法，如评论 [1] 中所述，只有在包含换行符时才会删除空格。因此，通过删除上面示例源代码中的换行符，代码片段的行为与预期一样：

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

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

推荐阅读