20个防御性的CSS处理⽅式，很细节很常见，也很容易被忽略
的处理⽅式
flexbox 内容换⾏
当我们使⽤ flexbox 布局的时候，默认情况下，在容器宽度不够时，可能就会出现这样的情况。
这个主要是因为 flex-wrap 的默认值是 nowrap，所以我们需要这样改变⼀下值。
间距
设计师在提供的设计稿中，很容易忽略⽂本在极限情况下与其他元素之间的间距，最终可能会出现这样的情况，⽂字与 icon 紧挨。
要处理这个情况，就是需要考虑是在⽂本还是 icon 部分，根据实际情况分析后选择添加 margin 值来增加间距。
.section__title {
: 1rem;
}
不过这个情况，我⼀般会考虑在 icon 上加  margin-left，这样的话，在没有 icon 的时候，⽂字还是可以顶到容器边缘。
长⽂本内容
这个就简单，就是⽂本过长的处理⽅式，⼀般情况下就是或者截断并已 ... 的形式出现。⾄于选择什么⽅式就要看当前页⾯模块的设计风格来决定了。
⽂中的处理⽅式是采⽤了截断出 ... 这种。
.username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
防⽌图像被拉伸或压缩
这种情况⼀般是在是由⽤户上传，或者图⽚未按规定⽐例使⽤导致的。
处理⽅式就是直接使⽤ object-fit 属性：
.card__thumb {
object-fit: cover;
}
锁定滚动链接
主要出现的情况是在当页⾯中点击弹出 modal 弹层时，页⾯内容本⾝很长的时候。
.modal__content {
overscroll-behavior-y: contain;
overflow-y: auto;
}
虽好，但⽬前存在很⼤的兼容性问题。
CSS 变量回退
这个 CSS 变量回退，说⽩了，其实就是当 CSS 变量值⽆效时⽽使⽤⼀个“”来保证某个属性值还是可⽤的。
.message__bubble {
css变量max-width: calc(100% - var(--actions-width, 70px));
}
不过结合⼩志在做猎头之前写前端页⾯时的处理⽅式，可能还会去考虑⼀下浏览器对 var() 的兼容性问题，那么就会再加上⼀个属性。不过现在的浏览器来看，好像普遍性不存在这个问题。
.message__bubble {
max-width: 70px;
max-width: var(--actions-width, 70px);
}
使⽤固定宽度或⾼度
这个没啥说的，主要就是对内容过长时，溢出容器时的⼀个保护措施。⽐如当我们把⾼度固定为 350px 之后，内容过长就会溢出。
⽽如果我们把 height 换成 min-height 的话，那情况就有所不同了。
同理，在宽度的处理上也是⼀样。
被忽略的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。