?> Background：:point_right: Unicode, white-space
In Unicode, the character 0x000A is specially designed to control line breaks. In CSS, we can write it as 000A or \A. We can use it as the content of the pseudo-element ::after, and append it to the specified element, to achieve line-breaking.
<script v-pre type="text/x-template" id="line-breaks_tlp">
<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
🌎Juejin:
https://juejin.im/user/57a3dbb2d342d300574d8369
<script>
</script>
</script>
!> In the above code, there is a space in front of the comma added between the multiple span.bold elements through the pseudo-element. The negative margin margin-left: -.25em; is used to offset the gaps that appear.
<iframe
width="100%"
height="431px"
frameborder="0"
src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gencontent&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false">
</iframe>