如何在flex容器中的文本节点和元素之间保留空白

Question

我正在开发一项功能，通过将文本包装在<mark>标记中，在运行时突出显示页面上的搜索结果。该网站使用Vuetify JS，因此几乎每个元素都是一个flex容器，并且(正如预期的那样(flex容器中文本节点和元素之间的空白被折叠。

当我高亮显示flex容器中文本节点的一部分时，高亮显示区域周围的空格将消失，并且元素看起来已损坏。

示例：

button {
display: flex;
}

<button>Add to <mark>cart</mark> now</button>
<p>(Should say "Add to <mark>cart</mark> now")<p>

是否有任何方法可以保留<mark>元素和文本相邻文本节点之间的空白？更新：由于这是与Vuetify应用程序交互，我希望能将一些样式应用于注入的<mark>元素，而不是父flex容器。

我尝试过用content(' ')向::before/::after添加伪元素，但没有成功。

Answer 1

如果您需要为视觉目的保留空白，那么gap: 3px是在flex容器中的项之间创建空间的一种简单方法。

编辑：根据@herrstrietzel的建议更新了答案，使用0.2em而不是像素，因此间距会随着字体大小的增加而增加(注释中的Codepen演示(。

button {
display: flex;
gap: 0.2em;
}

<button>Add to <mark>cart</mark> now</button>
<p>(Should say "Add to <mark>cart</mark> now")<p>

Answer 2

将其包装在预标记中并设置样式以继承正文字体

将white-space:pre添加到按钮规则中。

编辑：p标记也可以

button {
display: flex;
white-space: pre;  
}

<button>Add to <mark>cart</mark> now</button>
<p>(Should say "Add to <mark>cart</mark> now")
<p>

Answer 3

使用不间断空格 ，而不是<mark>...</mark>标记周围的两个常规空白字符。

button {
display: flex;
}

<button>Add to&nbsp;<mark>cart</mark>&nbsp;now</button>
<p>(Should say "Add to <mark>cart</mark> now")<p>