插入换行
?> 背景知识: 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>