11 Star 37 Fork 20

Baryy / You-need-to-know-css

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
line-breaks.md 1.76 KB
一键复制 编辑 原始数据 按行查看 历史
LHammer 提交于 2018-04-10 08:29 . :bug:amend line-breaks id

插入换行

?> 背景知识::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>
CSS
1
https://gitee.com/lhammer/You-need-to-know-css.git
git@gitee.com:lhammer/You-need-to-know-css.git
lhammer
You-need-to-know-css
You-need-to-know-css
master

搜索帮助