Introduction to the method of setting text line spacing in CSS (code example)-CSS Tutorial-php.cn

Introduction to the method of setting text line spacing in CSS (code example)

不言

Release： 2018-11-09 17:04:05

Original

4482 people have browsed it

The content of this article is an introduction to the method of setting text line spacing in CSS. The content is very detailed. Friends in need can refer to it.

For setting the line spacing, the line height attribute line-height is definitely needed to set the spacing. (Related recommendations: CSS Learning Manual)

When specifying an absolute value

The code is as follows:

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>

Copy after login

LineHeight.css

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

Copy after login

The effect is as follows:

Introduction to the method of setting text line spacing in CSS (code example)

Change the line height of LineHeight.css is 24px.

LineHeight.css

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

Copy after login

The effect is as follows: after changing to the above code, the line spacing becomes narrower

Introduction to the method of setting text line spacing in CSS (code example)

Further change LineHeight.css Change the line height to 8px.

LineHeight.css

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

Copy after login

The effect is as follows: reduce the line spacing too much and the content will overlap.

Introduction to the method of setting text line spacing in CSS (code example)

When specifying relative values

The code is as follows:

Except change the previous line In addition to specifying the height as an absolute value in pixels or other units, you can also specify a relative value to the font value.

LineHeight.css

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

Copy after login

If you write a number without specifying a unit, it will be relative to the size of the font. For 1.0, the font's height is the line height.

Change to the above CSS and open Lineheight.html in your web browser. The screen shown below will be displayed. Since the height of the lines is the same as the height of the font, there is almost no line spacing.

Introduction to the method of setting text line spacing in CSS (code example)

Change the CSS code to the following

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

Copy after login

After making the changes, open Lineheight.html in your web browser. The result will be displayed as shown below. Since the line height is 1.2 times the font height, line spacing is turned on.

Introduction to the method of setting text line spacing in CSS (code example)

Further change the CSS code to the following

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

Copy after login

After the changes, open Lineheight.html in your web browser. The result will be displayed as shown below. Line height is twice the font height and turns on line spacing for one line.

Introduction to the method of setting text line spacing in CSS (code example)

The above is the detailed content of Introduction to the method of setting text line spacing in CSS (code example). For more information, please follow other related articles on the PHP Chinese website!