日常工作中连躏，我們經常會碰到文字的寬度或者高度超過元素的大小萨惑，這個時候最長采用的方法就是文字截斷捐康，簡而言之，就是把在顯示前庸蔼，對文本進行截取處理解总，只留固定的字數，這種方案雖然好用姐仅，但操作起來有點不太酷花枫，如果字符里面混有英文字母數字，會導致字數相同掏膏，但寬度不同劳翰，顯示參差不齊。
某次項目經理為了留多少字糾結半天馒疹，從100佳簸，120，150颖变，160生均，180听想，200，然后又回到100马胧，為此我差點跟他打起來汉买。
當然也可以根據容器寬度來動態(tài)決定留多少字。但事實上CSS3已經給我們提供了輕松處理這個事情的方案佩脊。
單行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
核心屬性
text-overflow: [ clip | ellipsis | <string> ]{1,2}
clip：默認值蛙粘，將溢出的文本裁減掉
ellipsis：將溢出的文本用省略號(...)來表示
<string>：設置一個字符串用來表示溢出的文本
string 怎么設置，試了半天沒試出來邻吞，有道友說只對火狐有效组题，嗯，明天去公司試下抱冷，如果僅針對火狐就有點雞肋崔列。
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
首先為了保證容器對寬度敏感，需要設置其display 模式旺遮，除了-webkit-box赵讯，flex也是OK的。
其次設置盒子的方向耿眉，一般是垂直边翼，即限制其垂直方向的顯示方式， 然后就是關鍵屬性 -webkit-line-clamp登場鸣剪，限制其要顯示的行數组底。
試過，谷歌模式下OK筐骇，目前這些屬性已經廣泛應用债鸡，只要不要IE6，一般都扛得住铛纬。
失蹤半個月厌均，繼續(xù)加油。
