使用after伪元素进行不规则的换行

Question

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

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

然而，正如您所看到的，断线是不稳定的。这里发生了什么以及如何最好地解决这种情况？我发现改变了后来的伪元素来自＆＃39; \ A＆＃39 ;;到＆＃39; \ A＆＃39;问题似乎消失了，但我不明白为什么。

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

这是你的意思吗？