9个防御式的CSS代码

场景一：单行文本过长

我们设计时的理想效果是标题文字不超过8个字，正好显示完整。但实际应用时，有可能标题内容过长造成换行显示。我们可以添加文字溢出显示..省略号来解决。

"以防万一"标题过长产生的问题

场景二：类别标签中文本过长

在这个效果中，我们并不希望标签延伸到最右侧，我们希望内容过长时，可以在一定的长度时就折行显示。我们可以通过添 max-width属性来避免这种“以防万一”的问题。
还有min-width要注意

植物奶油 巧克力 草莓 榴莲 花生 芝麻 小米 鸡蛋

场景三：防止图片拉伸或挤压

我们预想的是用户按1:1的大小来上传头像图片，但实际用户上传的头像比例是五花八门，就会造成图片被拉伸或挤压变形。我们可以添加Object-fit:cover来等比例裁剪图片尺寸，这样图片就不会被拉伸或压缩，不过会有一部分图片被裁剪掉。

场景四：图片加载失败，文字显示问题

当图片上有文字时，如果图片加载失败，而外层容器的背景色和文字颜色接近，那么文字的展示效果就不理想；此时我们可以给图片加上对应的背景色。

美丽的风景图

场景五：必要时显示滚动条

在内容比较长的情况下，可以通过设置 overflow-y控制滚动条是否展示。但是这里更推荐将overflow-y的值设置为 auto。如果你将overflow-y显式设置为 scroll时，不管容器内容长短，滚动条都会展示出来，这种体验是不好的

在内容比较长的情况下，可以通过设置
overflow-y控制滚动条是否展示。但是这里更推荐将

场景六：预留滚动条空间，避免重排

当内容不足时不会出现滚动条，文字占据的宽度要宽些。当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。我们可以元素添加scrollbar-gutter:stable;来避免这个问题。

scrollbar-gutter属性可以接受以下几个值：

• ‌auto‌：这是默认值。浏览器将自行决定是否保留滚动条槽，通常意味着当滚动条出现时，内容区域会相应地缩小‌。
• ‌stable‌：使用这个值，浏览器将始终为滚动条保留空间，即使滚动条当前不可见。这意味着内容的可见区域将保持不变，无论滚动条是否显示‌
• ‌both-edges‌：这个值指示浏览器在滚动容器的两侧都保留空间，以便在需要时显示滚动条。这通常用于那些滚动条可能出现在任意一侧的场景‌

当内容不足时不会出现滚动条，文字占据的宽度要宽些。当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。

场景七：锁定滚动链

我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。在子元素上应用overscroll-behavior: contain就可以禁止掉这一行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

场景八：flex布局中，元素使用space-between最后一行两边分布的问题？

如果我们每一行显示的个数为n，那我们可以最后一行子项的后面加上n-2个span元素，span元素的宽度和其它子项元素宽度一样，但不用设置高度。

1
2
3
4
5
6
7

场景九：grid网格中的响应式断行效果的处理

当我们想尽可能多的在一行显示子项的个数时，有可能会出现子项个数不满一行的情况。那这个时候利用网格布局，使用auto-fill和auto-fit就会是两个完全不同的效果。

auto-fill ：网格的最大重复次数（正整数），如果有剩余空间，则会保留剩余空间，而不改变网格项目的宽度。

auto-fit：网格的最大重复次数（正整数），如果有剩余空间，网格项平分剩余空间来扩展自己的宽度。

以下情况只会出现在子项内容不能占满一行时。也就是说万一内容不能占满一行，则使用auto-fill就会出现空白问题。我们把auto-fill改成auto-fit就解决了这个问题