插入换行符

我遇到一个小问题，我有一个包含<span>的标题，我想确保在<span>之前插入一个换行符。老实说，在<span>之前添加一个<br>标签并没有什么问题（实际上，能够显示/隐藏这个标签 非常有用）。但是……为了实现布局，总是觉得使用 HTML 感觉有点奇怪。

因此，让我们开始一段旅程。在这段旅程中，我们会经常说“但是……”。

<h1 class="one">

  Break right after this

  <!-- <br> could go here, but can we do it with CSS? -->

  <span>
    and before this
  </span>

</h1>

块级元素可以做到

我们可以使用<div>代替<span>，这样我们就可以通过div是块级元素的特性来实现换行。

但是我们故意使用<span>，因为这是设计需求。换行符后的文本应该为内联/内联块，因为它需要背景和内边距等。

您可以通过伪元素插入换行符

这很简单

h1 span::before {
  content: "\A";
}

但是……<span>是内联元素。换行符不会有任何作用！就像一个真正的换行符一样，它不会有任何作用。

我们可以通过使空白符有意义来强制换行符生效……

h1.two span::before {
  content: "\A";
  white-space: pre;
}

这确实有效。但是……由于存在内边距和背景，当换行时，会留下一小部分。

我们可以通过使用box-decoration-break: clone;来修复尴尬的左边缘紧贴问题，但是……这只会留下更大的顶部部分。

如果我们将<span>设置为内联块，换行符将在这个块内发生，这不是我们想要的。

将伪元素设置为块级并保持<span>不变也不能解决问题。

您可以使用伪元素来注入实际文本，但这有点奇怪。

这是 Aaron Bushnell 的 想法。这里的诀窍是将<span>设置为块级，然后使用伪元素注入文本，并将其样式设置为内联元素。

h1 span {
  display: block;
}
h1 span::before {
  content: attr(data-text);
  background: black;
  padding: 1px 8px;
}

我一直喜欢使用伪元素的技巧，但这感觉有点危险，因为可能会损害可访问性。我认为有些屏幕阅读器可以读取伪元素，但并非全部，而且它们也不应该读取。更不用说，您无法通过这种方式复制和粘贴所有文本。至少文本仍然完全保留在 HTML 中！

利用表格布局

我最喜欢的 想法 来自 Thierry Koblentz。只需将<span>设置为display: table;就可以了。当然，这不是表格数据，但这并不重要。您可以通过 CSS 强制表格布局，这完全是为了利用表格布局的独特布局属性，而不是语义。

h1 span {
  display: table;
}

实时演示

包括一个我们只使用<br>的演示，这也是可以的。

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的 尝试在标题之前插入换行符，并在标题中使用内联块元素 演示。