下面是众所周知的使用 :after 伪元素添加换行符的方法:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.br:after {
content: '\a';
white-space: pre;
}
</style>
</head>
<body>
<span class="br">Line 1</span>
<span class="br">Line 2</span>
<span class="br">Line 3</span>
<span class="br">Line 4</span>
</body>
</html>
问题是当此 html 内容从浏览器复制并粘贴到外部编辑器时，例如记事本或 Word，换行符丢失，上面的文字看起来像
Line 1 Line 2 Line 3 Line 4
有什么解决方法吗？
最佳答案
如果您希望每个 span 元素单独显示一行，您可以设置为
.br { display: block; }
如果你只想在span之后换行，同时让它和前面的内容在同一行，恐怕没有办法。作为一种笨拙的解决方法，您可以在生成的内容中包含一个可见字符，然后在目标程序中进行搜索和替换以将其替换为换行符。
关于css - :after pseudo-element content lost when pasted into editor 中的换行符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21489423/