在 CSS 中设置行距

Subodh Poudel 2023年2月20日 2021年12月20日
在 CSS 中设置行距

我们将介绍几种在 CSS 中设置行距的方法。

在 CSS 中使用 line-height 属性设置行距

我们可以使用 CSS line-height 属性来定义段落中各行之间的间距。该属性设置线的高度。

在定义行高时,行与行之间的空间将相应地增大或缩小。我们可以将 line-height 属性应用于文本元素,尤其是段落。

该属性采用不同的值,例如 normalnumberlength%initialinherit。我们将在文章中演示这些不同选项的用法。

normal 值是 line-height 属性的默认值。它将设置正常的行高。

我们可以将值设置为无单位的 number。给定的数字将乘以当前字体大小,并用于设置 line-height。数字 1.6line-height 属性的推荐值。

我们还可以使用 length 值,给出诸如 ptpxcm 等单位。% 中的值指定当前字体大小的百分比以设置 line-height

我们可以使用 initial 值设置 line-height 属性的默认值。inherit 值将使用与其父元素相同的属性值。

例如,在 HTML 中创建四个 div,分别为 normalnumberpercentagelength。在 div 内,写一些虚拟文本。

然后,在 CSS 中,选择 div 元素并将 width 属性设置为 400px,将 word-wrap 属性设置为 break-word。接下来,选择具有类名的 div 个体,并根据以下示例中显示的类名将 line-height 属性值设置为 normal280%10px

我们将 div 宽度和 word-wrap 属性设置为 break-word 以强制文本进入下一行。通过这种方式,我们可以使用 line-height 属性来设置 CSS 中的行距。

示例代码:

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>
div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn