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>