?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
line-height:normal | <length> | <percentage> | <number>
默認(rèn)值:normal
適用于:所有元素
繼承性:有
動(dòng)畫(huà)性:當(dāng)值為 <length> | <number> 時(shí)
計(jì)算值:指定值
normal:允許內(nèi)容頂開(kāi)或溢出指定的容器邊界。
<length>:用長(zhǎng)度值指定行高。不允許負(fù)值。
<percentage>:用百分比指定行高,其百分比取值是基于字體的高度尺寸。不允許負(fù)值。
<number>:用乘積因子指定行高。不允許負(fù)值。
對(duì)應(yīng)的腳本特性為lineHeight。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>line-height_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test div{width:300px;margin:15px 0;border:1px solid #000;} .test p{margin:0;font-size:30px;} .fixed div{line-height:20px;} .percentage div{line-height:130%;} .gene div{line-height:1.5;} </style> </head> <body> <ul class="test"> <li class="fixed"> <strong>固定數(shù)值方式:</strong> - {line-height:20px;} <div><p>使用固定數(shù)值的方式定義line-height,如設(shè)置行高為18px類(lèi)似這樣的固定數(shù)值,可能會(huì)引發(fā)文字重疊的現(xiàn)象。</p></div> </li> <li class="percentage"> <strong>百分比方式:</strong> - {line-height:130%;} <div> 如果是這種情況 <p>使用百分比的方式定義line-height,與使用固定數(shù)值方式一樣,也可能會(huì)引發(fā)文字重疊的現(xiàn)象。</p> </div> </li> <li class="gene"> <strong>因子方式:</strong> - {line-height:1.5;} <div> 如果是這種情況 <p>使用因子方式定義line-height是非常安全的方式,將可以避免文字重疊的現(xiàn)象。</p> </div> </li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例