《圖解CSS3》學習記錄(03-文本省略與換行)

文本省略:

通常在頁面有限區(qū)域要顯示較多內(nèi)容的時候,可以使用文本省略咏尝。

使用text-overflow:ellipsis;配合white-space:nowrap抬吟、overflow:hidden屬性一起使用归薛,可以代替文本截取函數(shù)嗡靡。這樣做的最大有點是有助于搜索引擎的搜索。


單行文本省略css

word-wrap:

word-wrap屬性實現(xiàn)長單詞與URL地址的自動換行病线。word-wrap屬性有兩個值:

normal:瀏覽器默認值吓著,瀏覽器只在半角空格或連字符的地方進行換行,長文本和URL地址都會超出容器的邊框送挑。

break-word:將內(nèi)容在邊界內(nèi)換行(行末不會截斷英文單詞換行绑莺,但是當一行的寬度比長文本或者URL的長度短時,會被截斷成兩行或多行顯示)惕耕。

中文都會自動換行纺裁。

word-break:

word-break用來決定自動換行的處理方法,共有三個值:

normal:中文到邊界上的漢字換行司澎,英文從整個單詞換行欺缘;

break-all:可以強制截斷英文單詞,達到詞內(nèi)換行的效果挤安。

keep-all:不允許字斷開谚殊,中文把前后標點符號內(nèi)的一個漢字短語整個換行,英文單詞整個換行蛤铜;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嫩絮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子围肥,更是在濱河造成了極大的恐慌剿干,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虐先,死亡現(xiàn)場離奇詭異怨愤,居然都是意外死亡派敷,警方通過查閱死者的電腦和手機蛹批,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來篮愉,“玉大人腐芍,你說我怎么就攤上這事∈怎铮” “怎么了猪勇?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長颠蕴。 經(jīng)常有香客問我泣刹,道長助析,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任椅您,我火速辦了婚禮外冀,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘掀泳。我一直安慰自己雪隧,他們只是感情好,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布员舵。 她就那樣靜靜地躺著脑沿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪马僻。 梳的紋絲不亂的頭發(fā)上庄拇,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機與錄音巫玻,去河邊找鬼丛忆。 笑死,一個胖子當著我的面吹牛仍秤,可吹牛的內(nèi)容都是我干的熄诡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼诗力,長吁一口氣:“原來是場噩夢啊……” “哼凰浮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苇本,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤袜茧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后瓣窄,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體笛厦,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年俺夕,在試婚紗的時候發(fā)現(xiàn)自己被綠了裳凸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡劝贸,死狀恐怖姨谷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情映九,我是刑警寧澤梦湘,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響捌议,放射性物質(zhì)發(fā)生泄漏哼拔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一瓣颅、第九天 我趴在偏房一處隱蔽的房頂上張望管挟。 院中可真熱鬧,春花似錦弄捕、人聲如沸僻孝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽穿铆。三九已至,卻和暖如春斋荞,著一層夾襖步出監(jiān)牢的瞬間荞雏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工平酿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留凤优,地道東北人。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓蜈彼,卻偏偏與公主長得像筑辨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子幸逆,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 文本換行其實是個非常常用但并不起眼的特性棍辕。你什么都不用設(shè),瀏覽器自動就會換行还绘。例如英語楚昭,瀏覽器會根據(jù)容器尺寸,選擇...
    張歆琳閱讀 8,490評論 1 7
  • 本文是我報的網(wǎng)易微專業(yè)之《前端工程師》的第一篇課堂筆記拍顷,以后會多多的整理些課堂筆記給你們看抚太,希望熱愛前端的朋友們可...
    荷小音閱讀 1,286評論 0 7
  • CSS3新特性中關(guān)于文本方面的內(nèi)容不少,會有兩節(jié)內(nèi)容:文字渲染和文本格式昔案。今天來談談最復雜的部分——文本格式尿贫。今天...
    荷小音閱讀 978評論 0 2
  • CSS3中的word-wrap、word-break爱沟、white-space想必大家都接觸過帅霜,今天我們來一起溫故而...
    洞冶常咯嚨咚DQ閱讀 533評論 0 0
  • 每一次,我下定決心括享,和爸媽打電話時絕對不頂嘴搂根,絕對不吵鬧,絕對不爭論…… 因為我內(nèi)心里超煩不淡定的任何行為铃辖、話語剩愧,...
    白藜蘆醇閱讀 140評論 0 0