这是 CSS 进阶指南系列文章，本文主要介绍了 CSS 中容易被忽略的细节，通过阅读本文，你将学习 flex-wrap、处理长文本、避免错误的固定尺寸等内容。
flex wrap
Flex 作为目前最常用的 CSS 布局功能之一，设置 display: flex 包装容器的子元素，让内容彼此相邻排序是很实用的。
但它存在一个问题，当容器没有足够的空间时，默认情况下这些子元素不会换行。
我们需要设置 flex-wrap: wrap 来改变这种行为。
下面是一个典型的例子，我们有四个元素彼此相邻。
https://code.juejin.cn/pen/7128217812627095555
但是当容器的内容过多时，它会溢出到容器外部。
https://code.juejin.cn/pen/7128219855257337886
为了解决这个问题，我们可以给容器设置溢出水平滚动。
但这可能并不是所有场景都想要的。
我们还有另外一种解决问题的方案，那就是设置 flex-wrap: wrap 来让子元素换行。
https://code.juejin.cn/pen/7128222808466784271
处理长文本内容
这是一个商品列表，看上去很正常。
https://code.juejin.cn/pen/7128224162002239518
但是当某一个商品的名字过长时，它会把元素撑大。
https://code.juejin.cn/pen/7128227639281582094
在这类布局中，每个元素的样式一致性非常重要。
所以处理它的方式就是将长文本溢出部分给换成省略号隐藏起来。
将 white-space 设置为 nowrap，让文本不换行。
将 overflow 设置为 hidden，让溢出的部分隐藏掉。
将 text-overflow 设置为 ellipsis，让溢出的文字变成省略号。
https://code.juejin.cn/pen/7128227899529756672
固定尺寸
使用固定高度或者固定宽度是最常见的破坏布局的原因。
固定高度
有时我们会将某个元素的高度固定，但是内容大于高度，就会破坏布局。
https://code.juejin.cn/pen/7128237898767761420
为了避免内容从容器中泄漏出来，我们可以选择使用 min-height 而不是 height。
这样的话，即使内容很多，也不会破坏布局。
https://code.juejin.cn/pen/7128238504823226383
固定宽度
标签是我们常见的组件之一，有时候我们会给标签固定宽度。但如果标签中的文字过长，也会导致文字漏出。
https://code.juejin.cn/pen/7128238942737924103
设置 min-width 就可以避免这个问题。
https://code.juejin.cn/pen/7128243584494632967
如果你对 CSS 的内容感兴趣，欢迎关注我的新专栏 CSS 进阶指南，让我们一起成长。
