css snippets

gallery-list-dyamic.scss

// 容器内动态数量的item，
// 每行展示固定数量的item，下面的例子是每行4个
// 需设置flex-grow: 1、flow-basis: 21%
.gift-list--image {
    display: flex;
    flex-direction: row;
    // important!
    flex-wrap: wrap;

    .gift-list--item {
      position: relative;
      flex: 1 0 21%;
      margin: 0 rem(10) rem(20);

      // 空白item，占位专用，以免上下对不齐
      &.gift-list--item--lease {
        background-image: none;
        background-color: transparent;
      }
    }
}

text-layout.scss

// 动态文本
// 最多展示两行，超出直接截断
// 需要垂直居中，所以把文本单独放一个div里面，设置最大的高度为2行的高度
.image-text {
    display: flex;
    align-items: center;
    justify-content: center;

    &--inner {
      max-height: rem(44);
      line-height: rem(22);
      word-break: break-all;
      overflow: hidden;
    }
}

text.scss

// 多行文本
%multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 单行文本
%text-overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 动态配置的多行文本，会默认转行的
// 导致可能一个单词占一行
// 设置word-break: break-all强制不占一行，先占上一行再换行
%word-break {
  word-break: break-all;
}