经常使用的CSS各种属性

touch-action的CSS属性

• auto; //默认值
• none; //禁止触发默认的手势操做
• pan-x; //能够在父级元素内进行水平移动的手势操做
• pan-y; //能够在父级元素内进行垂直移动的手势操做
• manipulation; //容许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操做都不支持

css的单行文本溢出省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

css的多行文本溢出省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //超出3行省略
overflow: hidden;
text-overflow: ellipsis;
//注意：不要设置height属性

css消除button、select、input、a等标签选中时的虚线框

button,select,input,a{
    outline: 0 none !important;
    blr: expression(this.onFocus = this.blur());
}

css设置字母大小写

text-transform: capitalize; //首字母大写
                uppercase; //全大写
                lowercase; //全小写

input placeholder属性样式修改

input::-webkit-input-placeholder{
    color: red;
    font-size: 20px;
    text-align: right;
}

css控制元素是否换行显示

• 强制不换行

         div{white-space:nowrap;} 

• 自动换行

         div{ word-wrap: break-word; word-break: normal; } 

• 强制英文单词断行

         div{word-break:break-all;} 

cursor属性

值	描述
url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（一般是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	crosshair
pointer	pointer
move	此光标指示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右（东）移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize	此光标指示矩形框的边缘可被向上（北）移动
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize	此光标指示矩形框的边缘可被向下移动（南）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
text	此光标指示文本
wait	此光标指示程序正忙（一般是一只表或沙漏）
help	此光标指示可用的帮助（一般是一个问号或一个气球）