使用HTML中哪些伪元素实现不换行标签的换行效果?

3 min read

可以使用 content 属性结合 displaywhite-space 属性来实现:

HTML 代码:

<div class="content">
  Hello World
</div>

CSS 代码:

.content:before {
  content: "";
  display: block; /* 将伪元素设置为块级元素,占据一行 */
  white-space: pre-line; /* 换行符会被保留 */
}

这样就可以在 content 的前面添加一个块级元素,在它们之间自动换行。white-space 属性用于控制换行符的显示方式。