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

Home

Web Front-end

CSS Tutorial

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

不言

Nov 09, 2018 pm 05:04 PM

Line spacing

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:

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;
}

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;
}

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;
}

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;
}

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;
}

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Where should 'Subscribe to Podcast' link to?Apr 16, 2025 pm 12:04 PM

For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:

Browser Engine DiversityApr 16, 2025 pm 12:02 PM

We lost Opera when they went Chrome in 2013. Same deal with Edge when it also went Chrome earlier this year. Mike Taylor called these changes a "Decreasingly

UX Considerations for Web SharingApr 16, 2025 am 11:59 AM

From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these

Weekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical ResourcesApr 16, 2025 am 11:55 AM

In this week's roundup, Apple gets into web components, how Instagram is insta-loading scripts, and some food for thought for self-hosting critical resources.

Git Pathspecs and How to Use ThemApr 16, 2025 am 11:53 AM

When I was looking through the documentation of git commands, I noticed that many of them had an option for . I initially thought that this was just a

A Color Picker for Product ImagesApr 16, 2025 am 11:49 AM

Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the with . Nor do we

A Dark Mode Toggle with React and ThemeProviderApr 16, 2025 am 11:46 AM

I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including

Some Hands-On with the HTML Dialog ElementApr 16, 2025 am 11:33 AM

This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and

See all articles