在 CSS 中设置行距
我们将介绍几种在 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;
}
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