插入换行

?> 背景知识：:point_right: Unicode, white-space

在Unicode中，0x000A字符是专门控制换行的。在CSS中，我们可以写为\000A或\A,我们可以用它来作为::after伪元素的内容，并将其添加到指定元素的尾部，实现换行效果。

<script v-pre type="text/x-template" id="line-breaks"> <style> main{ width: 100%; padding: 52px 39px; background: rgba(180,160,120,.1); } span.key { padding-right: 6px; } span.bold { line-height: 2em; font-weight: bold; } span.br::before { content: "\A"; white-space: pre; } span.bold + span.bold::before { content: ", "; font-weight: 500; margin-left: -.25em; } </style> 👦🏿Name: LHammer 👨🏼‍💻GitHub: https://github.com/l-hammer https://gitee.com/lhammer 🌎掘金: https://juejin.im/user/57a3dbb2d342d300574d8369 <script> </script> </script>

!> 上述代码中，通过伪元素在多个span.bold元素间添加的逗号前面会有一个空格，负外边距margin-left: -.25em;的作用是抵消所出现的空隙。

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gencontent&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="431px"></iframe>