CSS設定文字行間距的方法介紹（程式碼範例）-css教學-PHP中文網

CSS設定文字行間距的方法介紹（程式碼範例）

不言

發布： 2018-11-09 17:04:05

原創

4482 人瀏覽過

本篇文章的內容是關於CSS設定文字行間距的方法介紹，內容很詳細，有需要的朋友可以參考一下。

對於行間距的設定肯定是需要行高屬性line-height來設定間距。（相關建議：CSS學習手冊）

#指定絕對值時

程式碼如下：

#LineHeight.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
<title></title>  
<link rel="stylesheet" href="LineHeight.css" />
<meta charset="utf-8" />
</head>
<body>  
<div class="TextFrame">采薇采薇，薇亦作止。曰归曰归，岁亦莫止。靡家靡室，猃狁之故。不遑启居，猃狁之故。采薇采薇，薇亦柔止。曰归曰归，心亦忧止。忧心烈烈，载饥载渴。我戍未定，靡使归聘。采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。王事靡盬，不遑启处。忧心孔疚，我行不来。彼尔维何，维常之华。彼路斯何，君子之车。戎车既驾，四牡业业。岂敢定居，一月三捷。驾彼四牡，四牡騤騤。君子所依，小人所腓。四牡翼翼，象弭鱼服。岂不日戒，猃狁孔棘。昔我往矣，杨柳依依。今我来思，雨雪霏霏。行道迟迟，载饥载渴。我心伤悲，莫知我哀。</div>
</body>
</html>

登入後複製

LineHeight.css

.TextFrame {
  line-height:48px;  
  width:480px;
}

登入後複製

#效果如下：

CSS設定文字行間距的方法介紹（程式碼範例）

##LineHeight.css的行高更改為24px。

LineHeight.css

.TextFrame {
  line-height:24px;  
  width:480px;
}

登入後複製

效果如下：更改為上述程式碼後，行間距變窄了

CSS設定文字行間距的方法介紹（程式碼範例）

進一步將LineHeight.css的行高改為8px。

LineHeight.css

.TextFrame {
  line-height:8px;  
  width:480px;
}

登入後複製

效果如下：縮小行間距太多，內容將會重疊。

CSS設定文字行間距的方法介紹（程式碼範例）

指定相對值時

#程式碼如下：

除了將上一行的高度指定為像素或其他單位的絕對值外，也可以指定字型值的相對值。

LineHeight.css

.TextFrame {
  line-height:1.0;  
  width:480px;
}

登入後複製

如果您在不指定單位的情況下編寫數字，則它將相對於字體的大小。對於1.0，字體的高度是行的高度。

更改為上面的CSS並在網路瀏覽器中開啟Lineheight.html。將顯示如下所示的螢幕。由於行的高度與字體的高度相同，因此幾乎沒有行間距。

CSS設定文字行間距的方法介紹（程式碼範例）

將CSS程式碼改為以下內容

.TextFrame {
  line-height:1.2;  
  width:480px;
}

登入後複製

更改後，在網頁瀏覽器中開啟Lineheight.html。將顯示結果如下圖所示。由於行高是字體高度的1.2倍，因此行間距開啟。

CSS設定文字行間距的方法介紹（程式碼範例）

進一步將CSS程式碼變更為以下內容

.TextFrame {
  line-height:1.2;  
  width:480px;
}

登入後複製

變更後，在網路瀏覽器中開啟Lineheight.html。將顯示結果如下圖所示。行高是字體高度的兩倍，並開啟一行的行間距。

CSS設定文字行間距的方法介紹（程式碼範例）

以上是CSS設定文字行間距的方法介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！