前端進階|第十四天 文本溢出除了截斷還是CSS3

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

某次項目經理為了留多少字糾結半天馒疹,從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ù)加油。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末告唆,一起剝皮案震驚了整個濱河市棺弊,隨后出現的幾起案子,更是在濱河造成了極大的恐慌擒悬,老刑警劉巖模她,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異懂牧,居然都是意外死亡缝驳,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來用狱,“玉大人运怖,你說我怎么就攤上這事∠囊粒” “怎么了摇展?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長溺忧。 經常有香客問我咏连,道長,這世上最難降的妖魔是什么鲁森? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任祟滴,我火速辦了婚禮,結果婚禮上歌溉,老公的妹妹穿的比我還像新娘垄懂。我一直安慰自己,他們只是感情好痛垛,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布草慧。 她就那樣靜靜地躺著,像睡著了一般匙头。 火紅的嫁衣襯著肌膚如雪漫谷。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天蹂析,我揣著相機與錄音舔示,去河邊找鬼。 笑死电抚,一個胖子當著我的面吹牛斩郎,可吹牛的內容都是我干的。 我是一名探鬼主播喻频,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼肘迎!你這毒婦竟也來了甥温?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤妓布,失蹤者是張志新(化名)和其女友劉穎姻蚓,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體匣沼,經...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡狰挡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片加叁。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡倦沧,死狀恐怖,靈堂內的尸體忽然破棺而出它匕,到底是詐尸還是另有隱情展融,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布豫柬,位于F島的核電站告希,受9級特大地震影響,放射性物質發(fā)生泄漏烧给。R本人自食惡果不足惜燕偶,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望础嫡。 院中可真熱鬧指么,春花似錦、人聲如沸驰吓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽檬贰。三九已至姑廉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間翁涤,已是汗流浹背桥言。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留葵礼,地道東北人号阿。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像鸳粉,于是被迫代替她去往敵國和親扔涧。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color届谈,font枯夜,text-align,li...
    love2013閱讀 2,318評論 0 11
  • (一)-webkit-tap-highlight-color 想要禁用這個高亮艰山,設置顏色的alpha值為0即可湖雹。 ...
    毛線內褲閱讀 478評論 0 0
  • CSS要點記錄 CSS 指層疊樣式表 (Cascading Style Sheets) 多種樣式時的優(yōu)先級問題 數...
    Tony__Hu閱讀 1,135評論 0 0
  • 一、CSS入門 1曙搬、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設定的標簽(元素)”摔吏。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,602評論 0 6
  • day01-_起源和結構 結構:Xhtml xml 表現:CSS 行為:DOM ECMAScript 以上都屬于W...
    Sakura_明妃閱讀 1,204評論 0 1