CSS：根据容器宽度包裹整个文本块

Question

我有一些这样的文本块：

<div>
    <span class="part-1">Some text.</span>
    <span class="part-2">Some text.</span>
</div>

父 div 元素具有可变宽度。如果容器足够宽，如何使两个 span 元素保持在一行中，如果没有足够的 space 将它们包装起来，但要避免在 span 元素内包装？

换句话说，.part-2 应该与 .part-1 一致或低于它，但始终是完整的。

编辑：重要的部分是 .part-2 不应该溢出容器，如果使用 white-space: no-wrap 就会发生这种情况。

Answer 1

<style>
    .unbreakable{
        white-space: nowrap;
    }
    #container{
        overflow:hidden;
    }

</style>

<div id="container">
    <span class="part-1 unbreakable">Some text.</span>
    <span class="part-2 unbreakable">Some text.</span>
</div>

使用 white-space css 属性，您可以定义在元素内部发生换行的方式。使用 nowrap 将阻止 spaces 上的任何换行。

编辑：添加了隐藏的溢出，因此文本不会消失。您可以使用 scroll 添加滚动条。

Answer 2

或许可以使用 Flexbox，但您仍然会溢出。

嗯……

div {
  margin: 40px auto;
  display: flex;
}
.flex-title {
  display: flex;
  flex-wrap: wrap;
}
.flex-title > span {
  white-space: nowrap;
  padding: 0 1em;
  border: 1px solid grey;
}

<div class="flex-title">
  <span class="part-1">Lorem ipsum dolor sit amet.</span>
  <span class="part-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, enim!</span>
</div>

CSS：根据容器宽度包裹整个文本块

CSS: Wrap whole blocks of text according to container width

css

word-wrap