從零學(xué)CSS系列之文本屬性
1.line-height
可以給某個(gè)元素指定一個(gè)不帶單位的縮放因子,這樣它的后代元素就會(huì)繼承這個(gè)縮放因子,再根據(jù)自身的字號(hào)大小來(lái)計(jì)算自己的行高(line-height)值,
body {
font-size: 12px;
line-height: 1.5;
}
h1 {
font-size: 36px;
}
這里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 則是 54px(36 * 1.5)。
就算使用 em,百分比等相對(duì)單位,后代元素繼承的仍然是計(jì)算后的行高(line-height)值,比如把上面的 body 行高改成 1.5em,那么 h1 的行高就會(huì)繼承這個(gè)值 18px。
2.text-decoration
文本修飾是非繼承類屬性,給 body 元素設(shè)置為 none,并不會(huì)影響到后代中默認(rèn)有文本修飾的元素,例如超鏈接,所以如果要去掉超鏈接的默認(rèn)下劃線還是需要單獨(dú)進(jìn)行設(shè)置,
a {
text-decoration: none;
}
雖然該屬性默認(rèn)不繼承,但是祖先元素上設(shè)置的修飾會(huì)“延伸”到后代元素中,
<p>我有下劃線 <span>我咋會(huì)有下劃線呢?</span></p>
p {
color: red;
text-decoration: underline;
}
p span {
color: green;
text-decoration: none;
}
這里的下劃線是 p 元素的。
p {
color: red;
text-decoration: underline;
}
p span {
color: green;
text-decoration: underline;
}
由于文本修飾屬性的延伸會(huì)造成一些兼容性的問(wèn)題,所以
最好的做法就是給需要修飾的文本單獨(dú)設(shè)置 text-decoration 屬性。
3.text-indent
可以使用該屬性給每個(gè)段落首行縮進(jìn)2個(gè)字符,而不是使用空格,
p {
text-indent: 2em;
}
也可以指定一個(gè)負(fù)數(shù)的值,產(chǎn)生首行懸掛的效果,
讓引號(hào)懸掛也是一種常用做法,
讓文本縮進(jìn)到一個(gè)足夠遠(yuǎn)的地方,可以讓文字消失,
text-indent: -9999px;
因此,通常的圖像替換文字常用方法,
.logo {
background: url(logo.png) no-repeat;
display: inline-block;
height: 36px;
text-indent: -9999px;
width: 72px;
}
IE6/7 并不真正支持 inline-block,某些情況下可能會(huì)導(dǎo)致 .logo 消失不見(jiàn),可以使用浮動(dòng)或者 block 替代 inline-block,不過(guò)兩者都會(huì)改變布局方式,也可以使用其它方法。
4.text-overflow
通常情況下,長(zhǎng)串的URL地址,在超出容器時(shí)會(huì)溢出,我們可以設(shè)定當(dāng)文本溢出包含容器時(shí)顯示省略符號(hào),
li {
overflow: hidden;
text-overflow: ellipsis;
}
必須配合 overflow: hidden; 一起使用;有時(shí)候可能還得加上一個(gè)寬度,比如IE 6,
對(duì)于那些默認(rèn)情況下并不會(huì)溢出的文本,需要強(qiáng)制其在一行內(nèi)顯示,這樣才能產(chǎn)生效果,
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%; /* for IE 6 */
}
使用 white-space: pre; 或者 word-break: keep-all; 也能強(qiáng)制文本在一行顯示,不過(guò)各有各的問(wèn)題。
在 IE 8/9 中,有時(shí)候會(huì)發(fā)現(xiàn)沒(méi)有效果,那有可能是祖先元素中某個(gè)元素設(shè)置了word-wrap: break-word; 而該屬性會(huì)表現(xiàn)得比 white-space: nowrap; 更強(qiáng)勢(shì),所以,有時(shí)候還得加上下面代碼,
word-wrap: normal;
5.text-shadow
在非白色背景的深色文字上,可以實(shí)現(xiàn)漂亮的內(nèi)嵌效果,
text-shadow: 0 1px 0 rgba(255,255,255,.75);
可以給文本添加多個(gè)陰影,用逗號(hào)分隔,
text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;
6.white-space
white-space 屬性設(shè)置如何處理元素內(nèi)的空白。
設(shè)置值為 nowrap 讓文本可以在同一行上繼續(xù),遇到邊界也不會(huì)換行,直到遇到 <br> 標(biāo)簽,
white-space: nowrap;
有時(shí)我們希望保留文本中的空格和換行符之類的,比如展示計(jì)算機(jī)的源代碼的時(shí)候,就會(huì)用到 <pre>,而 <pre> 的 white-space 屬性的值就是 pre,
pre {
white-space: pre;
}
pre 也不那么盡如人意,遇到邊界的時(shí)候不會(huì)自動(dòng)換行,所以 CSS 2.1 新增了 pre-wrap,
pre {
white-space: pre;
white-space: pre-wrap;
}
這樣 pre 元素里的內(nèi)容既能保持原有的格式,又能在內(nèi)容超出邊界的時(shí)候自動(dòng)換行。
由于不是所有瀏覽器都支持 pre-wrap,所以還需要讓那些不支持瀏覽器強(qiáng)制換行,
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
當(dāng)然,也許你并不希望換行,也不介意水平滾動(dòng)條,那可以用水平滾動(dòng)條來(lái)代替換行,
pre {
overflow: auto;
}
7.word-break
目前 webkit 大家族(包括 Google Chrome,Safari,Android Browser 等等)均不支持 keep-all 值,所以能用的也就 break-all 了,
word-break: break-all;
不過(guò)會(huì)造成英文文本閱讀障礙,應(yīng)該慎用,
8.word-wrap
這是比 word-break 更好的實(shí)現(xiàn)文本換行的方式,
word-wrap: break-word;
再添加一個(gè)溢出隱藏,避免一些惡意的連續(xù)字符,
overflow: hidden;
上一篇:HTML實(shí)現(xiàn)title 屬性換行小技巧
欄 目:CSS/HTML
下一篇:使用css實(shí)現(xiàn)全兼容tooltip提示框
本文標(biāo)題:從零學(xué)CSS系列之文本屬性
本文地址:http://www.jygsgssxh.com/a1/CSS_HTML/11520.html
您可能感興趣的文章
- 01-11純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容
- 01-11CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
- 01-11CSS3中Transition屬性詳解以及示例分享
- 01-11詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別
- 01-11使用css實(shí)現(xiàn)全兼容瀏覽器的三角形
- 01-11使用css實(shí)現(xiàn)全兼容tooltip提示框
- 01-11用css截取字符的幾種方法詳解(css排版隱藏溢出文本)
- 01-11CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- 01-11CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)
- 01-11討論CSS中的各類居中方式


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02html5算法,html5協(xié)議
- 04-02html5圖形,html5圖形縮放
- 04-02html5登錄模板,html5登錄注冊(cè)模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02關(guān)于html5播放視頻代碼的信息
- 04-02html5chm手冊(cè),html操作手冊(cè)
- 04-02朋友圈html5,朋友圈發(fā)泄情緒的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5掃二維碼,html5調(diào)用手機(jī)攝像頭掃描
隨機(jī)閱讀
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-11Mac OSX 打開(kāi)原生自帶讀寫NTFS功能(圖文
- 04-02jquery與jsp,用jquery


