一些工作中常用的CSS

发表于 | 分类于 | 阅读次数

尝试整理和集合工作中经常遇到的css小技巧…

单行超出省略字

1
2
3
4
5
.div{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

placeholder颜色

1
2
3
input::-webkit-input-placeholder{
  color: #666;
}

禁止文本选择

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

表单100%宽，但是有padding

1
2
3
4
5
input{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

横向滚动

1
2
3
4
5
.div{
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

不断更新

Fork me on GitHub