在HTML中用作空格的字符之间插入“填充”

Question

我的问题可能看起来很奇怪，但我正在尝试用HTML做这样的事情：

word1 word2 word3
  A     B     C

这本身很容易，但我想在A，B，C之间没有空格字符，这样如果用户通过键入ABC进行搜索，他就可以找到它们。换句话说，我希望角色之间没有空白区域，但我希望每个角色与下一个角色都有一个X字符的距离。

这可行吗？也许有一些css魔法？

提前致谢

Answer 1

您可以使用letter-spacing属性

像

这样的东西

<span>ABC<span>

CSS

span {
 letter-spacing:20px;
}

Answer 2

您可以使用填充插入填充... （或内联元素的保证金）

<span>A</span><span>B</span><span>C</span>

CSS：

span {
    margin: 0 4px;
}

实际填充（用于边框和填充）：

span {
    display: inline-block;
    padding: 0 4px;
}

或者，如果你太懒，可以使用字母间距。

<span>ABC</span>

CSS：

span {
    letter-spacing: 8px;
}