Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the high line-height attribute in CSS, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Let's review the basics of line-height:

Syntax: line-height: normal | inherit

Description: sets the height of the rows in the element.

Value: normal: default line height, generally 1 to 1.2; real number: real value, scaling factor; length: legal length value, which can be negative; percentage: percentage value based on the font size of the element.

Initial value: normal

Inheritance: inheritance

For: all elements

Media: vision

Calculated values: the length and percentage values are absolute values; other values are the same as the specified values.

The line-height attribute in CSS controls the amount of white space between two lines of text, which is usually set to a unitless value (such as line-height:1.4), indicating its ratio to the font-size attribute. Line-height is a very important attribute in typesetting. If it is too low, the lines of the text will be awkwardly huddled together, and if it is too high, they will be awkwardly separated, no matter which one is bad for reading. But you probably already know that.

In this article, we will focus on some techniques, and if you know (or can figure out) the exact value of line-height, you can make it more interesting.

Assign a different color to each line of text

Unfortunately, we don't have the:: nth-line selector. We can't count on it, either. Countless reasons may cause the text to be disconnected somewhere.

One way, though not standard, is to use the background of the element as the background of the text.

CSS

There is another trick, you can use linear-gradient () plus color dots to control that colors do not fade from each other, so that one color ends and suddenly starts another. We assume that the value of line-height is 22px, so we can make the gradient break every time 22px.

Sass

.text {

Background-image: linear-gradient (

To bottombottom

# 9588DD

# 9588DD 22px

# DD88C8 22px

# DD88C8 44px

# D3DD88 44px

# D3DD88 66px

# 88B0DD 66px

# 88B0DD)

}

After the combination of the two techniques:

If your browser doesn't support text's background-clip, such as Firefox, you'll see a color bar behind the text, which you may think looks cool or even like it, but maybe you'd rather go back to the old way of setting text colors. If it is the latter, you can use @ support to set css to take effect only if the browser supports it.

In addition, since you are repeatedly using the value of line-height, it might be better to turn it into a variable. I use SCSS here, but it would be great to use the real CSS variable one day, so that you can continue to modify it after the page is rendered and watch it take effect.

Sass

$lh: 1.4em

Body {

Font-size: 1em

Line-height: $lh

}

@ supports (- webkit-background-clip: text) {

P {

-webkit-background-clip: text

-webkit-text-fill-color: transparent

Background-image: linear-gradient (

To bottombottom

# 9588DD

# 9588DD $lh

# DD88C8 $lh

# DD88C8 $lh*2

# D3DD88 $lh*2

# D3DD88 $lh*3

# 88B0DD $lh*3

# 88B0DD)

}

}

The easiest way is to apply these attributes to the topmost element, and here is an example whose first few lines are the focus.

Sass

.text {

-webkit-background-clip: text

-webkit-text-fill-color: transparent

Background-image: linear-gradient (

To bottombottom

Rgba (white, 0.8)

Rgba (white, 0.8) $lh

Rgba (white, 0.6) $lh

Rgba (white, 0.6) $lh*2

Rgba (white, 0.4) $lh*2

Rgba (white, 0.4) $lh*3

Rgba (white, 0.2) $lh*3

Rgba (white, 0.2))

}

If we want to manipulate to the last arbitrary line, it will be more difficult. In that case, we need the ribbon to start all the way down to the last few lines, and fortunately we can do it with calc ().

Sass

.text {

-webkit-background-clip: text

-webkit-text-fill-color: transparent

Background-image: linear-gradient (

To bottombottom

Rgba (white, 0.8)

Rgba (white, 0.8) calc (100%-66px)

Rgba (white, 0.6) calc (100%-66px)

Rgba (white, 0.6) calc (100%-44px)

Rgba (white, 0.4) calc (100%-44px)

Rgba (white, 0.4) calc (100%-22px)

Rgba (white, 0.2) calc (100%-22px)

Rgba (white, 0.2))

Background-position: bottombottom center

}

There are other ways to achieve this effect, such as overlaying a pseudo-element gradient and setting pointer-events:none to avoid interference.

Lines between words

We described how to control the gradient color points above. In a similar way, we can create a gradient in units of 1px and repeat until we reach line-height. The easiest way is to use the

Repeating-linear-gradient to implement, but also to ensure that other elements obediently in place (for example, padding is also based on line-height).

Sass

.parent {

Padding: $lh*2

Background: # 082838

Background-image: repeating-linear-gradient (

To bottombottom

Rgba (white, 0) 0

Rgba (white, 0) $lh/1em*16px-1

Rgba (white, 0.1) $lh/1em*16px-1

Rgba (white, 0.1) $lh/1em*16px

);

}

To create 1px lines, we need to know the value of line-height in pixels, and then subtract 1. Minus 1 is so that the gradient will be accurately repeated with the known line-height, leaving the last 1px as the line. Because we set the font-size of body to 1em, that is, 16px, so the unit of line-height is set to em, you can remove the unit by removing 1em, and then multiply it by 16px and minus 1 to get the value we need.

Position images one-per-line

Another thing you can do to know line-height is to make bakcground-size match it, at least vertically. Then you can make the background repeat vertically, and the end result is: one picture per line.

Sass

.text

Background-image: url (image.svg)

Background-size: $lh $lh

Background-repeat: repeat-y

Padding-left: $lh*2

}

On the CSS line high line-height attribute use skills which are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.