2022-11-22
整合 TailwindCSS 與 Element Plus 的 CSS class 變數
HTML/CSS
2010.09.01
前幾天改版後,發現留言的版面,頭像上面的樓層顯示出了點問題,在 IE6、IE7 底下看,會發現文字被截掉(如下圖)。
後來詢問CSS達人:風痕影以及SR之後,發現只要設置line-height
就可以了!
於是當下我對 line-height 產生了興趣,想知道為什麼要這麼設定才可以解決字被截斷的困擾,因此上網搜尋了一下,查到了幾篇文章。
在 ISD webteam 這裡有一篇翻譯過後的文章:深入 CSS 行高,雖然標題打「深入」二字,但其實這篇是從淺至深講得很清楚,建議大家可以先看這篇文章,理解 line-height 真正扮演的角色為何。簡報第 81 ~ 83 頁就解決了我上述問題的疑惑,原來是 line-height 跟 font-size 的設定問題,導致 inline box 比 content area 小。
接著跟大家推薦的第二篇文章,是來自鑫空間的 css 行高 line-height 的一些深入理解及應用,這裡把許多 line-height 會碰到的問題,還有如何應用都寫得很詳細。大推啊!!!
看完這兩篇之後,讓我對 line-height 又更加認識了。而有時候我閱讀完文章,會有作筆記的習慣,因此我結合了這兩篇寫出了 line-height 心得,另外一點是因為上面兩篇作者都是大陸的朋友,在語氣以及專有名詞上,跟我們還是有點出入。我會嘗試用大家所習慣的口吻教導大家 line-height 的知識。也許所學不精、也許未嘗完善,所以看完後如有疑問歡迎提出,謝謝:)
line-height 的中文是「行高」,簡單來說就是兩行文字中間的高度。
行高的高度,是以文字的基線(baseline)為準,小時候有在外面補習英文的朋友,應該都曾經被教導要在格線上寫英文吧,而那條對準英文字母的線就是我們所說的基線(如下圖)。
▼ 行高就是基線跟基線之間的距離
line-height,總共有 5 種屬性可供運用,假設有一段 HTML code,p
跟 .main
的文字大小分別是 12px 以及 25px,就讓我們看一下,使用不同的 line-height
屬性,行高會如何變化。
寫法為line-height:normal
,行高會依照(該元素設定的文字大小 x 1.2)* 的結果作為依據。
▼ 使用 line-height:normal
為例,行高的最終值如下:
* 1.0 ~ 1.2 是瀏覽器給 line-height
的初始值,通常都用 1.2 來計算。
寫法是 line-height:1.8;
,行高會依照(該元素設定的文字大小 x 1.8)的結果作計算。
簡單來說,你的數字設定多少,行高就會乘以多少。
▼ 使用 line-height:1.8;
為例,行高的最終值為:
寫法是 line-height:18px;
,不管字型大小,你設定行高是 18px,他就是 18px。單位選擇有 em, px, pt …等。
▼ 使用 line-height:18px;
為例,行高的最終值為:
寫法是 line-height:180%;
,行高會依照(父元素文字大小 x 180%)的結果作依據。
例如我設定 body 的行高是 180%,那麼所有 body 的子元素(包含 body )都會跟著該設定。那如果 p 的行高另外設成 150% 呢?那就是從 p 以下(包含 p )的子元素都會套用 150% 的設定。
▼ 使用 line-height:180%;
為例,行高的最終值為:
寫法是 line-height:inherit;
,如果加上這段語法,就會繼承該父元素的設定。(因為繼承的寫法跟上述四種都不同,所以我單獨拉出來講)。
關於繼承,請看以下的 html 為例
▼ 設定 .main{line-height:inherit}
,行高的最終值為:
當有繼承的時候,會是自己的文字大小 x 父元素的行高;反之拿掉繼承,就是自己的文字大小 x 自己的行高。
先簡略說明什麼是 box model,我在這做了一張簡圖給各位參考:
每個字都被 1 個 inline box 包住,inline boxes 組成 line box,line boxes 再組成 containing box。英文的話是一個單字為一組 inline box。
接著我們把其中一段話放大,會發現有一個隱形的 box 圍繞著文字,他叫做 content area,他本身是一個隱藏的 box,我們沒辦法對他做任何事情。而這個 box 的高度取決於文字的大小。
而我一開始提到的文字截斷問題,就是因為inline boxes
、content area
,以及line-height
的關係(講了那麼久終於講到重點了…)
設定好行高後, box model 是怎麼分配他們的自己的高度呢?
舉例來說,假設我的行高跟字型大小這麼寫:font-size:12px; line-height:16px;
,可以看出他們的行間距差了 4px,接著 box model 會把這 4px 除以 2,也就是 4(px)/2=2(px),然後把 2 個 2px 分別分配在 content area 的頂部跟底部(如圖)。
也就是說,content area 的高度是 12px,而 inline box 的高度是 16px。當 inline box 高於 content area 的時候,兩邊是相安無事的,因為文字不會被截斷。
但如果,inline box
比 content area 小呢!!?
假設我寫成:font-size:16px; line-height:12px;
,而 inline box 的高度會優先以行高最為依據,所以 inline box 高度是 12px。但前面提到 content area 會圍繞著文字,所以文字大小設為 16px,content area 也是 16px。在這種情況下,就會有文字超出 inline box(如圖)。
因為 content area 是隱形的,我們肉眼所能看到的範圍只有 inline box 的藍底區塊。所以當 inline box 比較小的時候,它所包覆的文字會被截斷,我們看到的也只是那塊藍底截斷的文字。
這也就是為什麼,當你發現文字被截斷的時候,可以使用line-height
來解決截斷問題。
但最有效的方法,還是在於一開始,設定字型跟行高時就要注意,避免這樣的問題產生。
最後來談談高度吧。我們都知道當 div 有了文字就會自動產生高度。那麼這個高度是由 line-height
還是 font-size
決定的呢? (這邊指的不是指定高度 height)。
出來的範例如圖(有興趣的朋友可以把語法copy回去試試看):
在這邊我就不多做解釋了,相信聰明的各位一定看得出來高度到底是由誰決定的:D。
參考文章:
1. css行高line-height的一些深入理解及應用 / 鑫空間 鑫生活
2. [譯] 深入 CSS 行高 / ISD Webteam
(這兩篇真的講得很詳細,再次推薦!!)3. Box Model – CSS 框框模型 [2*] / 網頁藝術思考
4. CSS3 Text Effects Module / W3C