Вставка новой строки

?> Основные сведения: 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> Имя: 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>