CSS3簡明教程之文字與字體

第4章 文字與字體

text-overflow與word-wrap

text-overflow用來設置是否使用一個省略標記(...)標示對象內(nèi)文本的溢出。

語法:

// clip表示剪切窗市, ellipsis表示顯示省略標記
text-overflow: clip | ellipsis

但是text-overflow只是用來說明文字溢出時用什么方式顯示荧琼,要實現(xiàn)溢出時產(chǎn)生省略號的效果蔬将,還須定義強制文本在一行內(nèi)顯示(white-space:nowrap)及溢出內(nèi)容為隱藏(overflow:hidden)藐鹤,只有這樣才能實現(xiàn)溢出文本顯示省略號的效果,代碼如下:

div {
  text-overflow:ellipsis; 
  overflow:hidden; 
  white-space:nowrap; 
}

同時憔狞,word-wrap也可以用來設置文本行為蹂安,當前行超過指定容器的邊界時是否斷開轉(zhuǎn)行椭迎。

//normal表示控制連續(xù)文本換行, break-word表示內(nèi)容將在邊界內(nèi)換行
word-wrap: normal | break-word

normal為瀏覽器默認值藤抡,break-word設置在長單詞或 URL地址內(nèi)部進行換行侠碧,此屬性不常用,用瀏覽器默認值即可缠黍。

嵌入字體@font-face

@font-face能夠加載服務器端的字體文件弄兜,讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。

@font-face {
  font-family: 字體名稱;
  src: 字體文件在服務器上的相對或絕對路徑;
}

這樣設置之后瓷式,就可以像使用普通字體一樣在(font-*)中設置字體樣式替饿。

p {
    font-size :12px;
    font-family : "My Font";
    /*必須項,設置@font-face中font-family同樣的值*/
}

文本陰影text-shadow

text-shadow可以用來設置文本的陰影效果贸典。

text-shadow: X-Offset Y-Offset blur color;
  • X-Offset:表示陰影的水平偏移距離视卢,其值為正值時陰影向右偏移,反之向左偏移廊驼;

  • Y-Offset:是指陰影的垂直偏移距離据过,如果其值是正值時,陰影向下偏移妒挎,反之向上偏移绳锅;

  • Blur:是指陰影的模糊程度,其值不能是負值酝掩,如果值越大鳞芙,陰影越模糊,反之陰影越清晰,如果不需要陰影模糊可以將Blur值設置為0原朝;

  • Color:是指陰影的顏色驯嘱,其可以使用rgba色。

p {
  text-shadow: 0 1px 1px #fff;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末喳坠,一起剝皮案震驚了整個濱河市鞠评,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌丙笋,老刑警劉巖谢澈,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件煌贴,死亡現(xiàn)場離奇詭異御板,居然都是意外死亡,警方通過查閱死者的電腦和手機牛郑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門怠肋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人淹朋,你說我怎么就攤上這事笙各。” “怎么了础芍?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵杈抢,是天一觀的道長。 經(jīng)常有香客問我仑性,道長惶楼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任诊杆,我火速辦了婚禮歼捐,結(jié)果婚禮上晨汹,老公的妹妹穿的比我還像新娘。我一直安慰自己淘这,他們只是感情好,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布铝穷。 她就那樣靜靜地躺著钠怯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪氧骤。 梳的紋絲不亂的頭發(fā)上呻疹,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音刽锤,去河邊找鬼。 笑死并思,一個胖子當著我的面吹牛庐氮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播宋彼,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼弄砍,長吁一口氣:“原來是場噩夢啊……” “哼输涕!你這毒婦竟也來了音婶?” 一聲冷哼從身側(cè)響起莱坎,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎檐什,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乃正,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年荧飞,在試婚紗的時候發(fā)現(xiàn)自己被綠了搭综。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垢箕。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡兑巾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出帅掘,到底是詐尸還是另有隱情,我是刑警寧澤堂油,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布府框,位于F島的核電站吱窝,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏院峡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一发魄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧励幼,春花似錦、人聲如沸苹粟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辣卒。三九已至睛榄,卻和暖如春荣茫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背场靴。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工旨剥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留咧欣,地道東北人轨帜。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像蚌父,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子苟弛,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案膏秫? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align窘哈,li...
    wzhiq896閱讀 1,733評論 0 2
  • 1.CSS3 邊框 border-radius CSS屬性用來設置邊框圓角。當使用一個半徑時確定一個圓形腊尚;當使用兩...
    garble閱讀 639評論 0 0
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color满哪,font婿斥,text-align哨鸭,li...
    love2013閱讀 2,306評論 0 11
  • (1). 陰影模糊半徑與陰影擴展半徑的區(qū)別:陰影模糊半徑:此參數(shù)可選,其值只能是為正值吁脱,如果其值為0時,表示陰影不...
    Leisure_blogs閱讀 1,481評論 0 6