likes
comments
collection

你需要知道的 CSS 技巧

作者站长头像
站长
· 阅读数 17

这是 CSS 进阶指南系列文章,本文主要介绍了 CSS 中容易被忽略的细节,通过阅读本文,你将学习 flex-wrap、处理长文本、避免错误的固定尺寸等内容。

flex wrap

Flex 作为目前最常用的 CSS 布局功能之一,设置 display: flex 包装容器的子元素,让内容彼此相邻排序是很实用的。但它存在一个问题,当容器没有足够的空间时,默认情况下这些子元素不会换行。我们需要设置 flex-wrap: wrap 来改变这种行为。下面是一个典型的例子,我们有四个元素彼此相邻。 但是当容器的内容过多时,它会溢出到容器外部。 为了解决这个问题,我们可以给容器设置溢出水平滚动。但这可能并不是所有场景都想要的。我们还有另外一种解决问题的方案,那就是设置 flex-wrap: wrap 来让子元素换行。

处理长文本内容

这是一个商品列表,看上去很正常。 但是当某一个商品的名字过长时,它会把元素撑大。 在这类布局中,每个元素的样式一致性非常重要。所以处理它的方式就是将长文本溢出部分给换成省略号隐藏起来。将 white-space 设置为 nowrap,让文本不换行。将 overflow 设置为 hidden,让溢出的部分隐藏掉。将 text-overflow 设置为 ellipsis,让溢出的文字变成省略号。

固定尺寸

使用固定高度或者固定宽度是最常见的破坏布局的原因。

固定高度

有时我们会将某个元素的高度固定,但是内容大于高度,就会破坏布局。

为了避免内容从容器中泄漏出来,我们可以选择使用 min-height 而不是 height。这样的话,即使内容很多,也不会破坏布局。

固定宽度

标签是我们常见的组件之一,有时候我们会给标签固定宽度。但如果标签中的文字过长,也会导致文字漏出。

设置 min-width 就可以避免这个问题。

如果你对 CSS 的内容感兴趣,欢迎关注我的新专栏 CSS 进阶指南,让我们一起成长。