日常工作中连躏,我們經常會碰到文字的寬度或者高度超過元素的大小萨惑,這個時候最長采用的方法就是文字截斷捐康,簡而言之,就是把在顯示前庸蔼,對文本進行截取處理解总,只留固定的字數,這種方案雖然好用姐仅,但操作起來有點不太酷花枫,如果字符里面混有英文字母數字,會導致字數相同掏膏,但寬度不同劳翰,顯示參差不齊。
某次項目經理為了留多少字糾結半天馒疹,從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ù)加油。