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>

文字和元素节点上的单词和换行

1 个答案: