html - 文字和元素节点和换行

Question

我有这个:

<div style="width: 20px;">
  Hel<span style="position: relative;"><span style="position: absolute;"></span></span>la world
</div>

而且我希望 Hello 这个词在换行时能正确运行。例如，换行发生在 Hello 和 world 之间，而不是发生在 Hel 和 lo 之间。

除了 white-space:nowrap(或 pre)，我发现没有任何 CSS 有帮助，但这会产生后果。例如，如果我在跨度内添加一个空格，它不会用作潜在的换行符。

Answer 1

CSS 中的换行符肯定有问题，因为它在没有任何 white-space 的情况下工作正常规则。

尝试清理您的 CSS 并检查外部样式是否没有发生任何变化 display或 float你的<span> .

更新

因为你有内联样式，我假设你不能删除它们，如果你的跨度在你当前的更新中是空​​的，你可以用 display: none 完全删除跨度

span {
  display: none;
}
p {
  width: 300px;
  border: 1px solid #333;
  animation: changeSize 10s linear infinite;
}
@keyframes changeSize {
  50% {width: 5px;}
}

<p>Hel<span style="position: relative;"><span style="position: absolute;"></span></span>la world Hel<span style="position: relative;"><span style="position: absolute;"></span></span>la world Hel<span style="position: relative;"><span style="position: absolute;"></span></span>la world</p>