div
要知道css的三條基礎屬性，只能顯示一行。
屬性描述
overflow:hidden;
超出的文字隱藏。
text-overflow:ellipsis;
溢位用省略號顯示。
white-space:nowrap;
溢位不換行。
css3屬性，顯示多行。
屬性描述
display:-webkit-box;
將物件作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical;
從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）。
-webkit-line-clamp:2;
這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示的行數。
強制不換行
white-space:nowrap;自動換行
word-wrap: break-word;強制英文單詞斷行word-break: normal;
word-break:break-all;css設定不轉行
overflow:hidden 隱藏
white-space：normal 預設
nowrap 強制在同一行內顯示所有文字，直到文字結束或者遭遇 br 物件
設定強行換行
屬性值說明
word-break: normal;
依照亞洲語言和非亞洲語言的文字規則，允許在字內換行
word-break: break-all;
該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字
word-break: keep-all；
與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文字的非亞洲文字與之間的高度解決辦法
英文不換行
建議大家做skin時，記得在body裡加 word-break: break-all; 這樣可以解決ie的框架被英文撐開的問題
css控制文字超出省略
單行文字操作省略 思路 1.設定inline block屬相 2.強制不換行 3.固定高度 4.隱藏超出部分 5.顯示 display inline block white space nowrap width 100 overflow hidden text overflow ellipsis 多...
文字超出省略 遮罩層
文字超時顯示 overflow hidden text overflow ellipsis white space nowrap 多行內容的時候 overflow hidden text overflow ellipsis display webkit box webkit box orient v...
文字超出省略號型別
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行overflow hidden text overflow ellipsis display webkit box 作為彈性伸縮盒子模型顯示...