替换段落中的所有字符答案

【问题标题】：Replace all characters from a paragraph替换段落中的所有字符
【发布时间】：2017-06-03 03:38:48
【问题描述】：

您能想出一种方法来使用 css 将段落/字符串的所有字符替换为另一个文本或 unicode 字符吗？我的意思是将此文本显示为“混淆”/隐藏。

假设我有一个段落，我希望每个字符都替换为这样的 unicode 字符：http://www.fileformat.info/info/unicode/char/2588/index.htm。这是一种方法，但如果没有 javascript，我就无法实现。我认为的另一种方法是使用 SVG，但我想不出更具体的方法。

现在，我们使用Blokk font，效果很好，但我想这样做，而不必额外调用一种字体。

我知道这主要是一个理论问题，所以我不希望您通过代码向我提供确切的答案。我更想知道是否有人有我可以研究的想法。

【问题讨论】：

How can I replace text with CSS?的可能重复
我已经试过了。如果我使用伪元素，它不会替换我的文本，它只是在段落的开头/结尾添加新文本。因此，通过这种方式，我将所有段落替换为相同的文本，无论它们有多长。我不想那样。
这……不是问题吗？ “是的，我能想到一个”，但这对你没有任何帮助，isn't a good question/answer pair for Stackoverflow。如果您对已有的特定想法有疑问，并且该想法需要编程，而您的尝试没有成功，那么可以在 SO 上询问。
创建你自己的混淆字体

标签： css svg unicode fonts

【解决方案1】：

您可以使用background-color 并将其设置为与文本本身相同的颜色。这实际上不会改变内容，但可能会给出您正在寻找的结果。

例如：

.hidden {
  background-color: #000;
}
.hidden:hover {
  background-color: transparent;
}

<p>
Here is some <span class="hidden">hidden</span> text.
</p>

【讨论】：

这是我想到的第一个解决方案，但是对于一个单词的较大文本，结果是一个黑色方块，非常难看。我可以将它用于单词或单行段落并找到更通用的较大段落的解决方案（例如使用伪元素）。