常用的 css

多行文本超出隐藏

/* 单行隐藏 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

/* 多行隐藏 */
display: -webkit-box;
-webkit-box-orient: vertical;
/* 行数 */
-webkit-line-clamp: 3;
overflow: hidden;

/* 兼容性比较好的 */
ele {
  position: relative;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}
ele::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

UI 调试技巧

给有元素加上 outline，这样就能迅速了解自己所需的元素位置信息，这里没有使用 border 的原因是 border 会增加元素的大小但是 outline 不会。

html * {
  outline: 1px solid red;
}