CSS line-height 與 font-size 關系：溢出顯示與隱藏

現象

設置 font-size: 20px; line-height: 12px; 時，文字垂直方向超出行框。

表現

• 默認 overflow: visible：文字溢出容器顯示，可能重疊相鄰行。
• 容器加 overflow: hidden：溢出部分被剪裁隱藏。

示例

<div style="font-size:20px;line-height:12px">abb</div>
<div style="font-size:20px;line-height:12px;overflow:hidden">abb</div>

原理

• line-height 決定**行框**高度（行盒模型）。
• font-size 決定**內容區**高度（字形邊界）。
• 半行距 = (line-height - font-size) / 2，可為負值（當 line-height < font-size）。
• 行內元素背景、邊框、選中區域以**行框**為準；文字繪製以**基線**為基準，可能超出行框。

最佳實踐

• 正文建議 line-height: 1.5（無單位，繼承為倍數），保證可讀性。
• 單行文本垂直居中可用 line-height == height。
• 避免 line-height < font-size，除非刻意設計重疊效果並配合 overflow: hidden。