html - 用类似于 word 的 html 中的符号可视化换行符和段落符

Question

是否有可能在 html 中可视化换行符和段落符符号，就像在 word 中一样？

Answer 1

据我所知，答案是是和否，仅适用于 CSS，是适用于 CSS 和 JavaScript。

对于段落的结尾，::after选择器来拯救:

p::after {
  content: "¶";
  color: #6495ED;
}

<p>This is a pragraph.</p>
<p>Here goes another paragraph.</p>

但是，这在 <br> 上并不可靠，除非您想使用 JavaScript(见下文)。
检查这些问题以获取有关该问题的更多详细信息:

• "Can you target <br \> with css?"
• "Line break (like <br> ) using only css"

---

仅 CSS(不兼容跨浏览器)

这个纯 CSS 解决方案适用于以下浏览器 (Windows 10):
Chrome 56 和 Opera 43。它不适用于 Firefox 51、IE 11 或 Edge 38。

br {
  content: " ";
}

br::after {
  content: "↵\a";
  white-space: pre;
  color: #6495ED;
}

p::after {
  content: "¶";
  color: #6495ED;
}

<p>This is a pragraph with two sentences.<br>This is the second sentence, it follows a line break.</p>
<p>Here goes another paragraph.</p>

---

CSS & JavaScript 解决方案(跨浏览器)

如果您可以使用 JavaScript，这里是我的普通方法。
免责声明:我没有使用 JS 的经验，也许有更好的方法。
对我来说，这适用于上述所有浏览器。

var spanbr = document.createElement("span");
spanbr.className = "br";

var brs = document.getElementsByTagName("br");

for (var i = 0; i < brs.length; ++i) {
  brs[i].parentElement.insertBefore(spanbr, brs[i]);
}

.br::after {
  content: "↵";
  color: #6495ED;
}

p::after {
  content: "¶";
  color: #6495ED;
}

<p>This is a pragraph with two sentences.<br>This is the second sentence, it follows a line break.</p>
<p>Here goes another paragraph.</p>