防止子项（跨度）在单词/行（CSS/HTML）中间溢出

Question

所以我在一个 div 中有几个跨度：

<div id="parent">
  <span class="child">span one</span>
  <span class="child">span two</span>
  <span class="child">span three</span>
  <span class="child">span four</span>
  <span class="child">span five</span>
</div>

parent div(#parent) 是固定宽度，不是流动的。 span.child 有一个自动宽度，两边都有 3px 的填充。我遇到了一个问题，即 span 标签会溢出到 #parent 的下一行，即使在句子中间也是如此。

例如：span.child 包含“span 4”在#parent 的第一行末尾，它会将单词“four”溢出到下一行，而“span”仍然在上面的行。我已经尝试过自动换行。

任何想法我应该从哪里开始？我不确定是否需要将样式应用于跨度或父 div。哪个属性最适合这个，我只是想出了自动换行，无法完成这项工作。谢谢！

Answer 1

为防止将元素分成两行，请在其上设置white-space: nowrap。看来，防止在span 元素内正常换行是您正在寻找的，而不是防止溢出（这将是另一回事）。

如果某些span 元素的内容不适合div 元素内的一行，即使单独站在那里，那么你会遇到溢出问题。默认为可见溢出。