CSS记录贴

不折行显示,多余的用…显示:

.text-ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
}

折行显示,汉字和字母都折行

.text-noellipsis{
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

2018-9-11 12:59:59
关于flex布局的记录
父级容器使用flex布局使用flex-wrap: wrap;元素使用width:50%(偶数行使用 width: calc(50% - 0.2rem);)

.earnCoin {
        .boay {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          background-color: #fff;
          padding: 0.2rem 0.1rem;
          .itemrow {
            display: flex;
            flex-direction: row;
            align-items: center;
            box-sizing: border-box;
            width: 50%;
            background-color: #f5f8fa;
            padding: 0.2rem 0.1rem 0.1rem.1rem;
            &:nth-child(2n-1) {
              width: 50%;
            }
            &:nth-child(2n) {
              width: calc(50% - 0.2rem);
              margin-left: 0.2rem;
            }
            // margin-left: 0.2rem;
            margin-bottom: 0.1rem;
            .left {
              // width: 70%;
              // flex-grow: 2;
            }
            .right {
              // flex-grow: 1;
            }
          }
        }
      }