防御式编程

防御式编程
1.设置单行文本过多用省略号表示：
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;如果没有成功，则在其父元素上添加 min-width： 0 。

// 多行文本溢出省略
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;  // 设置对其模式
  -webkit-line-clamp: 2;   // 显示行数

2.在某些场景，我们并不希望标签延伸到最右侧，我们希望内容过长时，可以在一定的长度时就折行显示。我们可以通过添 max-width属性来避免这种“以防万一”的问题。同理：min-width。
3.防止图片拉伸或者挤压：添加Object-fit: cover来等比例裁剪图片尺寸，这样图片就不会被拉伸或压缩，不过会有一部分图片被裁剪掉。
4.在内容比较长的情况下，可以通过设置overflow-y 控制滚动条是否展示。
5.预留滚动条空间，避免重排。当内容不足时不会出现滚动条，文字占据的宽度要宽些。当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。我们可以元素添加scrollbar-gutter: stable;来避免这个问题。
6.锁定滚动链。当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。在子元素上应用overscroll-behavior: contain就可以禁止掉这一行为。
7.flex 布局中，元素使用 space-between 解决最后一行两边分布的问题。
8.grid 网格中的响应式断行效果的处理：当我们想尽可能多的在一行显示子项的个数时，有可能会出现子项个数不满一行的情况。那这个时候利用网格布局，使用 auto-fill 和 auto-fit 就会是两个完全不同的效果。
auto-fill ：网格的最大重复次数（正整数），如果有剩余空间，则会保留剩余空间，而不改变网格项目的宽度。
auto-fit：网格的最大重复次数（正整数），如果有剩余空间，网格项平分剩余空间来扩展自己的宽度。