带有伪元素后的不稳定换行答案

【问题标题】：erratic line wrapping with after pseudo-element带有伪元素后的不稳定换行
【发布时间】：2015-10-27 01:20:57
【问题描述】：

我有一个 html 布局，它在 chrome 和 safari 中以意想不到的方式重排。

我的文档的结构是这样的，每个单词都包裹在一个跨度中，每一行都包裹在一个跨度中，然后将文档包裹在一个div中。为了分隔行，我使用 after 伪元素 as described here。

但是，如您所见，换行是不稳定的。这里发生了什么以及如何最好地纠正这种情况？我发现将 after 伪元素从 '\A';到 '\A' 问题似乎消失了，但我不明白为什么。

.bc {
  border: solid 1px green;
  font-size: 25px;
  width: 500px;
  height: 200px;
}

div > span:after {
  content: '\A';
  white-space: pre;
}

&lt;div class="bc"&gt;&lt;span&gt;&lt;span&gt;HELLO, &lt;/span&gt;&lt;span&gt;how &lt;/span&gt;&lt;span&gt;is &lt;/span&gt;&lt;span&gt;Matilda.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;MATILDA!, &lt;/span&gt;&lt;span&gt;kinsman &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;the &lt;/span&gt;&lt;span&gt;seahorses, &lt;/span&gt;&lt;span&gt;and &lt;/span&gt;&lt;span&gt;friend &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;Franklin.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;EXTRA, &lt;/span&gt;&lt;span&gt;niece &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;Matilda, &lt;/span&gt;&lt;span&gt;never &lt;/span&gt;&lt;span&gt;pleasant &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;Emanuel.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

【问题讨论】：

bugs.chromium.org/p/chromium/issues/detail?id=516709

标签： html css pseudo-element

【解决方案1】：

如果您添加word-wrap，它似乎可以正常工作

.bc {
  border: solid 1px green;
  font-size: 25px;
  width: 500px;
  height: 200px;
 /*word-wrap: break-word;*/
}

div > span:after {
  content: '\A';
  white-space: pre;
}

&lt;div class="bc"&gt;&lt;span&gt;&lt;span&gt;HELLO, &lt;/span&gt;&lt;span&gt;how &lt;/span&gt;&lt;span&gt;is &lt;/span&gt;&lt;span&gt;Matilda.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;MATILDA!, &lt;/span&gt;&lt;span&gt;kinsman &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;the &lt;/span&gt;&lt;span&gt;seahorses, &lt;/span&gt;&lt;span&gt;and &lt;/span&gt;&lt;span&gt;friend &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;Franklin.&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;EXTRA, &lt;/span&gt;&lt;span&gt;niece &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;Matilda, &lt;/span&gt;&lt;span&gt;never &lt;/span&gt;&lt;span&gt;pleasant &lt;/span&gt;&lt;span&gt;to &lt;/span&gt;&lt;span&gt;Emanuel. &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

这是你的意思吗？

【讨论】：

是的，这行得通。但是由于这个例子中没有什么大的词可以打破，我很困惑为什么这个解决方案（以及 OP 中的那个）。
是的，但是为什么会这样呢？第一个长句不需要添加。
我相信white-space: pre; 是这样工作的；尝试使用white-space: pre-wrap;，它可以在没有尾随空格的情况下工作