CSS常用的属性方法-蒲公英云

CSS常用的属性方法

文本换行

//强制不换行 div{ 
        white-space:nowrap;
    }
    //自动换行 div{ 
        word-wrap: break-word;
        word-break: normal;
    }
    //强制英文单词断行 div{ 
        word-break:break-all;
    }

清除浮动

.clear:after { 
        content:'';
        display:block;
        clear:both;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }
    .clear { 
        zoom:1;
    }

图片不拉伸

img { 
      object-fit: cover;
      -o-object-fit: cover;
    }

垂直居中

go-to-center { 
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%)
    }

单行隐藏

.t-s { 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

双行隐藏

注意，打包过后会丢失属性 -webkit-box-orient:vertical;, 打包过后需要检查 , 增加注释。

.t-d { 
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    /*! autoprefixer: off */
    -webkit-box-orient:vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2; 
 }

JS的方法实现文本溢出隐藏

设置文本两端对齐（适合文字）

div {  
      width: 100px; 
      padding: 0 10px;  
      background: pink;  
      margin-bottom: 10px; 
      text-align-last:justify; /* 这是关键属性 */
    }
<div>账号</div>
    <div>密码设置</div>
    <div>手机号</div>