迹忆客 专注技术分享

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

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

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

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

该属性采用不同的值，例如 normal、number、length、%、initial 和 inherit。我们将在文章中演示这些不同选项的用法。

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

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

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

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

例如，在 HTML 中创建四个 div，分别为 normal、number、percentage 和 length。在 div 内，写一些虚拟文本。

然后，在 CSS 中，选择 div 元素并将 width 属性设置为 400px，将 word-wrap 属性设置为 break-word。接下来，选择具有类名的 div 个体，并根据以下示例中显示的类名将 line-height 属性值设置为 normal、2、80% 和 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;
}