CSS中的line-hight屬性是用來控制文本行之間的空隙的。它一般情況下沒有單位的設定(如：line-height:1.4;)所以這是一個按字體尺寸的比例來計算。這對印刷版來說是一個很重要的屬性。線條過低就會擠在一起，線條過高就會相距甚遠，這兩種情況都會降低可讀性。不過你可能已經(jīng)知道了這一點。

本文中，我們將把注意力放在一些設計上。如果你知道(或可以計算出)的line-height的精確值，你可以做一些奇妙的東西！

每行文本設置不同顏色

很遺憾這里沒有::nth-line(),我們直接使用是不可靠的,因為會有很多不同的事情導致文本在不同的地方被打亂。

盡管是非標準的，但這里還有一種用法就是使用一個元素的背景作為文字的背景。

C/C++ Code復制內(nèi)容到剪貼板

.text?{

-webkit-background-clip:?text;

-webkit-text-fill-color:?transparent;

}

而這里還有另一個絕招，你可以用linear-gradient()來讓顏色排列在一起就不會褪變成另一個顏色。它只是會突然的結束然后開始另一個。比方說我們知道line-height是22px，我們可以制作一個像這樣的階梯色。

CSS Code復制內(nèi)容到剪貼板

.text?{

background-image:?linear-gradient(

tobottombottom,

#9588DD,

#9588DD22px,

#DD88C822px,

#DD88C844px,

#D3DD8844px,

#D3DD8866px,

#88B0DD66px,

#88B0DD);

}

結合著兩種技巧

在不支持文本背景剪裁的瀏覽器里，比如Firefox,你會得到一個文本后面的實心背景顏色塊。也許這很酷你會喜歡它。但也可能你只是想要得到那樣的文本顏色。在這種情況下，你可以使用@support去單獨的支持它。

此外，當你需要在各處使用line-height，把他設置成變量或許會更好。我將在這里使用SCSS，或許有一天在CSS中也可以使用變量。所以改變之后，他依舊被渲染，看起來它一直保持工作。

CSS Code復制內(nèi)容到剪貼板

$lh:?1.4em;

body?{

font-size:?1em;

line-height:?$lh;

}

@supports?(-webkit-background-clip:?text)?{

p?{

-webkit-background-clip:?text;

-webkit-text-fill-color:transparent;

background-image:?linear-gradient(

tobottombottom,

#9588DD,

#9588DD$lh,

#DD88C8$lh,

#DD88C8$lh*2,

#D3DD88$lh*2,

#D3DD88$lh*3,

#88B0DD$lh*3,

#88B0DD);

}

}

在元素的頂部使用這種方式是最容易的。下面是一個例子，重點是前幾行被改變。

CSS Code復制內(nèi)容到剪貼板

.text?{

-webkit-background-clip:?text;

-webkit-text-fill-color:transparent;

background-image:?linear-gradient(

tobottombottom,

rgba(white,?0.8),

rgba(white,?0.8)?$lh,

rgba(white,?0.6)?$lh,

rgba(white,?0.6)?$lh*2,

rgba(white,?0.4)?$lh*2,

rgba(white,?0.4)?$lh*3,

rgba(white,?0.2)?$lh*3,

rgba(white,?0.2));

}

如果我們試圖在任意數(shù)量的文本上對最后幾行進行定位，這將變得更加困難。在這種情況下，我們需要讓第一個顏色帶從頂部開始向下漸變。幸運的是我們可以用calc()做到這一點。

CSS Code復制內(nèi)容到剪貼板

.text?{

-webkit-background-clip:?text;

-webkit-text-fill-color:transparent;

background-image:?linear-gradient(

tobottombottom,

rgba(white,?0.8),

rgba(white,?0.8)?calc(100%?-66px),

rgba(white,?0.6)?calc(100%?-66px),

rgba(white,?0.6)?calc(100%?-44px),

rgba(white,?0.4)?calc(100%?-44px),

rgba(white,?0.4)?calc(100%?-22px),

rgba(white,?0.2)?calc(100%?-22px),

rgba(white,?0.2));

background-position:bottombottomcenter;

}

還有其他方法也可以做到這樣的效果，比如覆蓋偽元素梯度(用pointer-events: none;所以它并不惱人)。

文字之間的行線

使用一個和我們上面使用的相類似的solid-color-stops的技術，我們可以建立一個1px的線在已知的line-height上重復。最簡單的方法是使用repeating-linear-gradient()來確保其他元素可以正常使用(比如說padding也是基于line-height的)。

CSS Code復制內(nèi)容到剪貼板

.parent?{

padding:?$lh*2;

background:#082838;

background-image:?repeating-linear-gradient(

tobottombottom,

rgba(white,?0)???0,

rgba(white,?0)???$lh/1em*16px-1,

rgba(white,?0.1)?$lh/1em*16px-1,

rgba(white,?0.1)?$lh/1em*16px

);

}

為了得到用1px的線，我們需要知道line-height的像素值是多少，然后用這個值在減去1px。我們的目標是正好在line-height的高度上進行梯度的重復，來讓這個空間的最后一個像素是一條線。因為我們已經(jīng)不是body字體大小的1em,而是16px了。而且line-height的設置用的是em的單位。所以我們可以通過1em劃分要刪除的單元，然后復制成16px并在需要的時候減1.

每一行圖片的位置

如果你知道精確地line-height，你還可以做的另一家事情是用background-size在縱軸上去匹配它。然后你把他垂直重復，他將會在每一行有一個圖片的隊列。

CSS Code復制內(nèi)容到剪貼板

.text

background-image:url(image.svg);

background-size:?$lh?$lh;

background-repeat:repeat-y;

padding-left:?$lh*2;

}

line-height 屬性的繼承問題曾出現(xiàn)這樣一個問題：

CSS Code復制內(nèi)容到剪貼板

p?{

line-height:17px;

}

品牌：XZX

市場價：145元

顏色：黑色

面料：棉

尺碼：S??M??L

衣長：S?89??M?90???L?91

肩寬：S?35??M?36???L?37

胸圍：S?88??M?92???L?96

下擺：S?104?M?108??L?112

袖長：S?17??M?17.5?L18

由于測量方法不同，誤差在2CM左右！

你會發(fā)現(xiàn)上面例子的文字會重疊在一起！這是什么原因呢？

由于.detail-content 中的 p 元素繼承了默認設置的全局樣式 line-height:17px，而自定義區(qū)塊又是由商家自定義，其內(nèi)字體被設置為了 font-size:30px;(可能為任意值)，根據(jù) Inline formatting model，得知該文字的 line-box 高為 17px，多出的字體部分上下溢出，所以會出現(xiàn)字體重疊的現(xiàn)象。

那這個問題如何解決呢？

解決方案：我們給 .mdse-detail 下的 p 元素設定樣式屬性 line-height:1.4。

為什么解決方案里的 1.4 不帶單位？

元素的 line-height 屬性值會繼承父元素(或祖先元素)的 line-height 屬性值，如果屬性值有單位，則繼承的值是換算后具體的 px 值而非原始的值(比如：em、%)，而如果屬性值沒有單位，則瀏覽器會繼承數(shù)值(無單位)，然后根據(jù)該元素的 font-size 值重新解析得到新的 line-height 值。這個和 table 的 tr 設置 display 屬性有一點點類似(tr.style.display = ”;，IE 顯示 block，而 Firefox 等標準瀏覽器顯示 table-row)。

還有另外一個相對低效的方法，但也不失為一個快捷的解決方案：

CSS Code復制內(nèi)容到剪貼板

.mdse-detail?p?*?{

line-height:140%;

}

總結

以上是生活随笔為你收集整理的css文本行高是哪个属性_CSS中的line-height行高属性的使用技巧小结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。