html - 伪元素后不稳定的换行

Question

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

我的文档结构是这样的，每个单词都包含在一个 span 中，每一行都包含在一个 span 中，然后文档包含在一个 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;
}

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

Answer 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;
}

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

你是这个意思吗？