經常使用的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	此光標指示可用的幫助（一般是一個問號或一個氣球）