使用css可视化空格

Question

有没有办法在不改变原始HTML代码的情况下仅使用CSS可视化文本中的空白？让我们说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
• space(·) - >我能想到的唯一方法就是在所有空格前加上类似<span class='space' />和使用的东西:after

最后一个不满足仅使用CSS和原始HTML的条件.有办法做到这一点吗？

编辑:根据要求,这里是paragarph后的pilcrow标志的CSS: .paragraph:after { content: "¶"; }

Answer 1

javascript和php可能更容易,但如果你坚持使用CSS,你可以使用自定义web字体并用字形替换空格字符(U + 0020).信息有些浏览器兼容的CSS和生成定制的Web字体

Answer 2

我怀疑CSS能否实现这一点。它的选择器旨在选择标签，而不是纯文本。

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