Home >Web Front-end >CSS Tutorial >Introduction to the method of setting text line spacing in CSS (code example)
Introduction to the method of setting text line spacing in CSS (code example)
- 不言Original
- 2018-11-09 17:04:054499browse
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>
LineHeight.css
.TextFrame {
line-height:48px;
width:480px;
}The effect is as follows:
Change the line height of LineHeight.css is 24px.
LineHeight.css
.TextFrame {
line-height:24px;
width:480px;
}The effect is as follows: after changing to the above code, the line spacing becomes narrower
Further change LineHeight.css Change the line height to 8px.
LineHeight.css
.TextFrame {
line-height:8px;
width:480px;
}The effect is as follows: reduce the line spacing too much and the content will overlap.
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;
}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.
Change the CSS code to the following
.TextFrame {
line-height:1.2;
width:480px;
}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.
Further change the CSS code to the following
.TextFrame {
line-height:1.2;
width:480px;
}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.
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!