css tips

Posted on

CSS技巧

  1. 让文字不被选中

    1
    2
    3
    4
    5
    .text {
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
    }

  2. 让图片不被选中

    1
    2
    3
    4
    5
    6
    7
    img {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;  
    }

  3. 单词换行

    1
    2
    3
    4
    .word {
     word-wrap: break-word;
     word-break: break-all;
    }

  4. css画叉

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .a {
      display: inline-block;
      width: 20px;
      height:5px;
      background: #ccc;
      line-height:0;
      font-size:0;
      vertical-align:middle;
      -webkit-transform: rotate(45deg);
      position: absolute;
      top: 16px;
      right: 13px;
    }
    .a:after {
      content:'/';
      display:block;
      width: 20px;
      height:5px;
      background: #ccc;
      -webkit-transform: rotate(-90deg);
    }

  5. 文字过多三点显示隐藏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 单行三点隐藏
    .one-line {
        white-space: nowrap;
        text-overflow:ellipsis;
        width: 150px;
        overflow: hidden;
    }
    // 多行三点隐藏
    .more-line {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }