Vuetify中如何保留flex容器内文本与<mark>元素间的空格？

方案1：给元素添加左右外边距 #

直接通过给注入的<mark>元素设置左右外边距，模拟空格的视觉效果，无需修改父flex容器的样式：

mark {
  margin: 0 0.25em;
}

0.25em的外边距宽度和普通空格接近，能完美还原预期的文本排版，且适配不同字号的文本。

方案2：注入非断空格（需修改高亮逻辑） #

如果不想依赖样式，也可以在实时高亮的注入逻辑中，给<mark>标签前后插入非断空格（ ）：

<button>Add to &nbsp;<mark>cart</mark>&nbsp; now</button>

不过这种方式需要调整文本替换的代码逻辑，灵活性不如纯样式方案。

关于伪元素方案失效的原因 #

你之前尝试的::before/::after伪元素添加空格无效，是因为伪元素属于<mark>的子节点，并非flex容器的直接子元素，不会被flex布局识别为独立的“空格项”。如果一定要用伪元素实现，需要将<mark>设置为inline-block，但这种方式反而冗余，不如外边距方案高效。

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