當CSS中的文字超過一行時,通常使用行高來控制文字的間距和可讀性。然而,當文字只有兩行時,試圖使用相同的行高會導致一個問題:行高會變得異常的寬。
p { font-size: 16px; line-height: 1.5; }
這段代碼設(shè)置了文字大小為16像素,行高為1.5,但當這個樣式應(yīng)用到只有兩行文字的段落時,行高實際上會變得更大,行高變得如此寬,以至于兩行文字之間的間距會看起來很奇怪。
為了解決這個問題,我們可以使用單位em代替像素作為行高。 em是相對于當前元素的字體大小的單位,因此在兩行文字的情況下,行高僅僅是所選字體大小的1.5倍。
p { font-size: 16px; line-height: 1.2em; }
這樣,當我們將樣式應(yīng)用于只有兩行文字的段落時,行高不會變得異常的寬,而是僅僅兩倍于我們所選的文字大小。 這種方法可以確保我們的布局更加美觀,而不會犧牲可讀性。