在容器中设置文本以在跨距之间进行自动换行，但不在跨距内的空间上进行自动换行（理想情况下，使用CSS）

Question

我想设置一个动态大小的div，包含跨度，每个跨度包含一些任意字符串，可能包含空格。如果div中的文本足够长，需要自动换行，我希望换行符在跨度之间发生，而不是在它们内部。例如，在下面的示例中：

<div>
  <span>
    This contains arbitrary text.
  </span>
  <span>
    As does this.
  </span>
  <span>
    Also, this sentence.
  </span>
</div>

换行符应出现在“text”之间。并作为”;还有这个。”和“也”，但不是，例如，在“包含”和“任意”之间。但是，我无法做到这一点。

理想情况下，这应该只使用CSS;我宁愿避免使用JQuery根据div和span的宽度计算插入显式换行符，或类似的东西。

Answer 1

我可以通过反直觉地解决这个问题，将“white-space：nowrap”和“float：left”放在跨度上，如下所示：

<div>
  <span style="white-space:nowrap;float:left">
    This contains arbitrary text.
  </span>
  <span style="white-space:nowrap;float:left">
    As does this.
  </span>
  <span style="white-space:nowrap;float:left">
    Also, this sentence.
  </span>
</div>