如何在没有 HTML 标签的情况下实现 CSS 换行？

不带 HTML 标签的 CSS 换行

仅用 CSS 实现换行，而不引入额外的 HTML 元素，可以使用以下方法来实现:

问题：

在项目符号列表中，您希望在

之后有一个换行符。元素但不在之前，保持

在同一条线上。常规解决方案建议设置 display: block;对于

，但这破坏了元素的内联性质。

CSS 解决方案：

解决方案在于使用 CSS 伪元素引入一个换行。 CSS 代码如下：

h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}

说明：

• display: inline;保留

  与其他文本在同一行。

• h4:after 在

  之后创建一个伪元素。元素。

• 内容：“a”；将换行符注入伪元素。
• white-space: pre;保留换行符。

演示：

可以在此处找到此技术的示例：http://jsfiddle.net/Bb2d7/

来源：

这个技巧的灵感来自这个 StackOverflow 答案：https://stackoverflow.com/a/66000/509752

以上是如何在没有 HTML 标签的情况下实现 CSS 换行？的详细内容。更多信息请关注PHP中文网其他相关文章！