CSS 奇淫技巧

识别 HTML 字符中的 \n

TIP

white-space 属性用于设置如何处理元素中的空白

white-space: pre;
属性值换行符空格和制表符文字换行
normal合并合并换行
nowrap合并合并不换行
pre保留保留不换行
pre-wrap保留保留换行
pre-line保留合并换行
break-spaces保留保留换行

MDNopen in new window

CSS(Unicode 字符) 实现换行

TIP

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

<div>
  <span class="br">前端常用知识软件推荐</span>
  <span class="br">踩坑记录</span>
  <span>各种兼容问题</span>
</div>
.br::after {
  content: '\A';
  white-space: pre;
}
前端常用知识软件推荐踩坑记录各种兼容问题

使用 CSS(Unicode 字符)让 inline 水平元素换行open in new window

上次更新: