html - 当每个字母都用 span 包裹时，Chrome 会打断单词

Question

在我的 HTML 中，我将每个单词中的每个字符分别用 a 包裹起来span，然后给每个字符一个::after伪元素。在 Chrome 93 上，这会导致单词在到达容器末尾时中断。在 Firefox 92 和 Safari 15 上，单词不会中断，而是移动到下一行。

p {
  max-width: 50ch;
  border: 1px solid black;
}

.c {
  position: relative;
}

.c::after {
  position: absolute;
  content: '';
}

<p>
  <span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span><span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span><span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span><span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span><span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span><span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span><span class="c">s</span><span class="c">a</span><span class="c">l</span><span class="c">u</span><span class="c">t</span><span class="c">a</span><span class="c">t</span><span class="c">i</span><span class="c">o</span><span class="c">n</span><span class="c">s</span><span class="c"> </span>
</p>

我想要单词没有被破坏的 Firefox/Safari 行为。我尝试了各种各样的white-space值word-break，但我找不到有用的东西。我很确定::after伪元素是这里的罪魁祸首，因为当我摆脱它时，单词会按预期换行。

有没有办法防止单词在 Chrome 中中断，同时保持::after（或者::before如果效果更好），并且不需要将每个单词包装在一个跨度中nowrap？

标签： htmlcssgoogle-chrome