CSS——flex 布局设置文字不自动换行（固定元素不被挤压）
在CSS中，如果你想要设置文本不自动换行，可以使用white-space属性，并将其值设置为nowrap。这样做可以阻止文本自动换行，即使在容器的宽度不足以显示全部文本时。
例如：
.no-wrap {
white-space: nowrap;
}
<div class="no-wrap">这段文本不会自动换行，即使它很长。</div>如果你想要在使用Flexbox布局时，防止flex项（元素）被压缩或伸缩，可以设置flex-shrink和flex-grow属性。默认情况下，flex项的flex-shrink值为1，表示当容器宽度不足以容纳所有flex项时，项目会缩小来填满空间。
如果你不想让某个flex项被压缩，可以将其flex-shrink属性设置为0：
.flex-item {
flex-shrink: 0;
}
<div style="display: flex;">
<div>这是一个会被压缩的flex项，如果容器太窄。</div>
<div class="flex-item">这是一个固定宽度的flex项，不会被压缩。</div>
<div>另一个会被压缩的flex项。</div>
</div>在这个例子中，第二个flex项通过设置flex-shrink为0，防止了在容器宽度不足以容纳所有flex项时被压缩。
评论已关闭