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

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

每行文本設置不同顏色

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

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

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

結(jié)合著兩種技巧

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

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

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

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

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

文字之間的行線

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

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

每一行圖片的位置

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

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

你會發(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）。
還有另外一個相對低效的方法，但也不失為一個快捷的解決方案：

最新評論