收集于平時常用但易忘的CSS實現方法，如有遺漏或補充，還請指正！

解決inline-block元素設置overflow:hidden屬性導致相鄰行內元素向下偏移

.wrap {
display: inline-block;
overflow: hidden
vertical-align: bottom
}

超出部分顯示省略號

// 單行文本
.wrap {
overflow:hidden;/*超出部分隱藏*/
text-overflow:ellipsis;/*超出部分顯示省略號*/
white-space:nowrap;/*規定段落中的文本不進行換行 */
}
// 多行文本
.wrap {
width: 100%;
overflow: hidden;
display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示 *必須結合的屬性*
-webkit-box-orient: vertical; //設置伸縮盒對象的子元素的排列方式 *必須結合的屬性*
-webkit-line-clamp: 3; //用來限制在一個塊元素中顯示的文本的行數
word-break: break-all; //讓瀏覽器實現在任意位置的換行 *break-all為允許在單詞內換行*
}

css實現不換行、自動換行、強制換行

//不換行
.wrap {
white-space:nowrap;
}
//自動換行
.wrap {
word-wrap: break-word;
word-break: normal;
}
//強制換行
.wrap {
word-break:break-all;
}

CSS實現文本兩端對齊

.wrap {
text-align: justify;
text-justify: distribute-all-lines; //ie6-8
text-align-last: justify; //一個塊或行的最后一行對齊方式
-moz-text-align-last: justify;
-webkit-text-align-last: justify;
}

實現文字豎向排版

// 單列展示時
.wrap {
width: 25px;
line-height: 18px;
height: auto;
font-size: 12px;
padding: 8px 5px;
word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/
}
// 多列展示時
.wrap {
height: 210px;
line-height: 30px;
text-align: justify;
writing-mode: vertical-lr; //從左向右
writing-mode: tb-lr; //IE從左向右
//writing-mode: vertical-rl; -- 從右向左
//writing-mode: tb-rl; -- 從右向左
}

使元素鼠標事件失效

.wrap {
// 如果按tab能選中該元素，如button，然后按回車還是能執行對應的事件，如click。
pointer-events: none;
cursor: default;
}

禁止用戶選擇

.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

cursor屬性

.wrap {
cursor：pointer; //小手指；