使用类似于Word的html中的符号显示换行符和段落符 [英] visualize line-break and paragraph break with symbols in html similar to word

问题描述

无论如何，都可以像在单词中一样在html中可视化换行符和段落分隔符吗?

Is it anyhow possible to visualize line break and paragraph breaks symbols in html, like in word?

推荐答案

据我所知，答案是是，否仅适用于CSS，是>对于CSS&JavaScript.

As far as I know, the answer is yes and no for CSS only, yes for CSS & JavaScript.

对于本段的结尾， :: after 选择器可以解决:

For the end of the paragraph, the ::after selector comes to the rescue:

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

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

但是，除非您要使用JavaScript(请参见下文)，否则这在< br> 上不能可靠地起作用.
请查看以下问题，以获取有关该问题的更多详细信息:

However, this does not reliably work on <br>, unless you want to use JavaScript (see below).
Check these questions for further details on the issue:

• 您可以定位< br \> 使用CSS?"
• 换行符(如< br> )仅使用CSS"

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

仅CSS解决方案适用于以下浏览器(Windows 10):
Chrome 56和Opera43.在Firefox 51，IE 11或Edge 38上不起作用.

This CSS only solution works for me on the following browsers (Windows 10):
Chrome 56 and Opera 43. It does not work on Firefox 51, IE 11 or 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>

如果您可以使用JavaScript，这是我的常用方法.
免责声明:我对JS没有经验，也许有更好的方法.
对我来说，这适用于上面提到的所有浏览器.

If you are okay with using JavaScript, here is my vanilla approach.
Disclaimer: I'm not experienced with JS, maybe there is a better way.
For me, this works with all of the browsers mentioned above.

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>

这篇关于使用类似于Word的html中的符号显示换行符和段落符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！