Question

我有一些像这样的文本块：

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

父div元素具有流体宽度。如果容器足够宽，如何使两个span元素保留在一行中，如果空间不足则包装它们，但是为了避免包含在span个元素中？

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

编辑：重要的一点是，white-space: no-wrap不应该溢出容器，如果使用{{1}}则会发生这种情况。

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可以防止任何空间包装。

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

Answer 2

Flexbox可能，但你仍然会溢出。

嗯...

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: