使用CSS可视化空格符号

Question

有没有一种只使用 CSS 而不更改原始 HTML 代码就可以可视化文本中的空格的方法？ 假设 HTML 代码如下：

<div class="paragraph">Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.</div><div class="paragraph">In augue ipsum, iaculis vel dapibus ut, viverra ut tellus. In ornare euismod leo a ultrices.</div>

• 段落结尾（¶）-> 可以使用:after
• 换行符（↵）-> 可以使用:after
• 空格（·）-> 我能想到的唯一方法是在所有空格前面添加类似于<span class='space' />的东西，然后使用:after

最后一个没有符合只使用CSS和原始HTML的条件。有没有什么方法可以做到这一点？

编辑：按要求，以下是添加到段落后面的标记的CSS代码： .paragraph:after { content: "¶"; }

- bretik

---

你应该使用 JavaScript 来完成这个任务。 - thirtydot

你能展示一下如何使用:after获取段落结尾和换行符吗？ - Randomblue

为什么要使用 <div class="paragraph">？这正是 <p> 标签的作用所在！ - Eric

您可以尝试找到一种在空格处显示点的字体，并将字体更改为该字体。 - Casey Chu

没有可能做到这一点。在2007年的草案中有一个属性，但在2010年被删除了。它被称为text-replace，您可以在此处查看更多信息：https://dev59.com/2lsV5IYBdhLWcg3wyxV_#35792003/. - VFDan

Answer 1

Javascript和PHP可能更容易，但如果你坚持使用CSS，可以使用自定义网络字体，并将空格字符（U+0020）替换为图形符号。有关某些浏览器兼容的CSS信息和生成自定义网络字体

- uncreative

---

+1。然而我会补充说，你需要同时考虑非换行空格字符以及页面中显示的任何其他空白字符。此外，还要考虑如果使用 white-space:pre; 样式时会发生什么。 - Spudley

Answer 2

我怀疑这个不能通过CSS实现。它的选择器是设计用来选择标签，而不是纯文本。

我建议您使用一些脚本替换 - 服务器端或客户端。您可以尝试使用PHP preg_replace 或 JavaScript replace 函数。

- Rusty Horse

---

是的，不幸的是，在CSS中没有办法匹配和替换字符。我对此非常确定。 - Simone

Answer 3

可以通过安装字体GNU Unifont并应用自定义CSS规则来实现某种程度的效果，例如，突出显示任何包含退格字符的输入区域

input
{
      font-family:Unifont;
}

对于我的使用情况，我正在使用一个浏览器扩展程序，它允许我按域应用自定义CSS规则。当我想要调试这样的问题时，我启用该域的CSS规则，现在可以看到页面中是否存在退格字符。然而，从我的快速测试中看来，它似乎没有以任何可见的方式显示TAB字符或换行符/回车符。

请注意，我已经看到有人建议创建一个字体，使用这些Unicode字形表示来表示控制字符，这听起来对我很合理 ;-)

专门用于显示“不可见”字符和其他Unicode字符的字体在这里更详细地讨论 Unicode BMP回退字体可以在这里下载 从我发现的情况来看，除了可视化的退格之外，没有任何字体方法能够显示更多内容。

因此，除非找到更好的字体，也许最好的方法是使用Chrome扩展程序，以下是两个朝着这个方向的扩展程序：

https://github.com/chpmrc/zero-width-chrome-extension https://github.com/glebm/render-whitespace-on-github

- Brad Parks