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

【问题标题】：insert 'padding' between characters in HTML that functions as white space在 HTML 中用作空格的字符之间插入“填充”
【发布时间】：2014-04-08 17:28:56
【问题描述】：

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

word1 word2 word3
  A     B     C

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

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

提前致谢

【问题讨论】：

是的，它被称为填充。我认为 CSS 的介绍性教程是必要的。
@TylerH 填充将需要不必要的 html... 魔术被称为 letter-spacing ;)

标签： html css character space

【解决方案1】：

您可以插入内边距... 使用内边距！（或内联元素的边距）

<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;
}

【讨论】：

【解决方案2】：

你可以使用letter-spacing属性

类似

<span>ABC<span>

CSS

span {
 letter-spacing:20px;
}

【讨论】：

单独的字母间距不会产生指定的效果。
@rvighne 你是什么意思？是的。
@rvighne 重新阅读了这个问题。 “我希望 A、B、C 之间没有空格字符，这样如果用户通过键入 ABC 进行搜索，他就可以找到它们” 问题不在于重新创建 OP 给出的示例。您可能需要考虑删除反对票