插入换行

TIP

背景知识Unicode (opens new window), white-space (opens new window)

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

<style scoped>
  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>
<template>
  <main class="main">
    <span class="key">👦🏿Name:</span>
    <span class="bold">前端开发</span>
    <span class="key br">👨🏼‍💻GitHub:</span>
    <span class="bold">https://github.com/</span>
    <span class="bold">https://gitee.com/</span>
    <span class="key br">🌎掘金:</span>
    <span class="bold">https://juejin.im/</span>
  </main>
</template>

👦🏿Name: 前端开发 👨🏼‍💻GitHub: https://github.com/ https://gitee.com/ 🌎掘金: https://juejin.im/

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