前言：这是最近翻译的一篇文章
我在header标签开头忘里边加入一个span标签的时候，有一点小问题。我总是想确保在span标签之前能够换行。明确地讲，在标签前边加入<br> 并没有什么错误。（事实上这是非常有用的办法）。但是用HTML标签实现这个效果总让人觉得怪怪的。
所以让我们探索更多的可能。
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>
用块级元素实现它
除了<span> ，我们可以用<div>，我们只需用div的默认块级特性来实现它。
但是考虑到设计和语义，我们用span更好些。在文字换行处，我们可以使用inline/inline-block，因为方便我们设置background和padding值等等
在换行处使用伪元素
很简单：
css
h1 span::before {
content: "A";
}
但是，这个<span> 是一个行内元素。换行没有效果。
我们可以通过设置white-space: pre来强迫它换行
h1.two span::before {
content: "A";
white-space: pre;
}
这样做确实换行了，但是由于padding和background的原因，在换行的时候留了一个黑块，
我们可以通过使用 box-decoration-break: clone修复这个尴尬的左边黑块，但是，结果却是产生了一个更大的黑块。
box-decoration-break对一些问题非常有效，但是在这里失效了。
如果我们给这个span设置成inline-block，这个断行出就会和块级元素在一行，也不是我们想要的结果：
让这个伪元素块级化和单独使用span也没有效果：
利用伪元素
这是亚伦-布什内尔的想法。这个窍门是让span块级化，但是通过伪元素给它同时添加文字和样式让他也是一个行内元素。
css
h1 span {
display: block;
}
h1 span::before {
content: attr(data-text);
background: black;
padding: 1px 8px;
}
我一直很喜欢利用伪元素来做一些技巧，但是这种方法可能会有点危险，如果你使用不好的话。我想一些屏幕阅读器可以读出伪元素，但是也不完全。是，他们也不会故意这样做。更不要说你不能复制和粘贴所有的文字，这种方式。至少文本仍然保持完全的HTML！
利用表格布局
我最喜欢的方法是来自蒂埃里科布伦茨。仅仅给span设置：display: table;你完成之后。这不是表格数据，但是这不重要。你需要清楚的是强制使用css的表格布局是利用表格的独有特性。这并不具有语义。
css
h1 span {
display: table
英文出处:https://css-tricks.com/injecting-line-break/