/*css禁止文字被鼠标选中*/
.box {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
/*文字自动换行(主要针对英文,数字等,中文会自动换行)*/
.box{
word-wrap:break-word;
}
/* 去掉页面滚动条 */
body::-webkit-scrollbar {
width: 0px;
}
/* 单行文字过长以省略号代替 */
.text-ellipsis {
/* 省略号 */
text-overflow: ellipsis;
overflow: hidden;
/* 不换行 */
white-space: nowrap;
}
/* 多行文字显示三行后以省略号代替,有兼容性问题 */
.text-3-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* 从上向下垂直排列子元素 */
-webkit-box-orient: vertical;
}
实用css布局
水平居中:
1、子框:display:inline-block; 父框:text-align: center;
2、父框:display:flex;子框:margin:0 auto;
3、子框:display:table; + margin: 0 auto;
4、父框:display:flex;justify-content: center;
5、定位
垂直居中:
1、父框:display:table-cell;vertical-align: middle;
2、父框:display:flex;align-items: center;
3、定位
固比:
1、固:float:left 比:overflow:hidden;
2、固:float:left 比:margin-left:
3、父:display:flex;固:width:xxxpx 比:flex:1;