你需要知道的 CSS 技巧

·  阅读 1204
你需要知道的 CSS 技巧

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 7 天,点击查看活动详情

这是 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 进阶指南,让我们一起成长。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改