css小技巧

文字超出省略

/**
 * 超出一行换行
 */
white-space: nowrap;  // 溢出不换行
overflow: hidden;  // 超出的文本隐藏
text-overflow: ellipsis;  // 溢出用省略号显示

/**
 * 超出固定行数换行
 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; 
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;  // 行数

css写盒子的指向性箭头

  .up-point {
    position: absolute;
    top: -6px;
    left: 34px;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    border-top-width: 0;
    border-bottom-color: #dcdfe6;
    margin-right: 3px;
    &::after {
      content: ' ';
      position: absolute;
      top: 1px;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 6px;
      border-top-width: 0;
      border-bottom-color: #ffffff;
      margin-left: -6px;
    }
  }