line-height通过设定行框高度影响文本垂直对齐与行间距，值大于font-size时文本居中且行间距增大，提升可读性；配合overflow-wrap等控制换行的属性，共同优化文本显示效果。
line-height在 CSS 中影响着文本行的高度，进而直接决定了文本在容器中如何垂直分布，以及在多行文本情况下，行与行之间的间距。简而言之，它影响着换行的视觉效果，但并不直接控制何时换行。
line-height 控制行间距和文本的垂直对齐方式。
line-height 是如何影响文本的垂直对齐和行间距的？
line-height属性定义了文本行框的高度。当它的值大于
font-size时，文本行框会增大，文本会在行框内垂直居中。如果
line-height小于
font-size，文本可能会重叠。行间距实际上就是相邻文本行基线之间的距离，受到
line-height值的直接影响。更大的
line-height意味着更大的行间距，文本看起来更舒展；反之，更小的
line-height会使文本行更紧凑。
例如，如果
font-size设置为
16px，而
line-height设置为
24px，那么每行文本的实际高度将是
24px，文本会在这个
24px的空间内垂直居中，行间距就是
8px(24px - 16px)。如果
line-height设置为
12px，小于
font-size，文本可能出现重叠，影响可读性。
立即学习“前端免费学习笔记（深入）”；
如何使用 line-height 创造更好的阅读体验？
好的阅读体验很大程度上取决于合适的行间距。
line-height的选择应该根据
font-size和文本的长度来调整。通常，
line-height设置为
font-size的 1.4 到 1.6 倍是一个不错的起点。对于较长的文本段落，适当增加
line-height可以提高可读性，减少眼睛的疲劳。
例如：
body {
font-size: 16px;
line-height: 1.5; /* 相当于 24px 的行高 */
}
p {
font-size: 14px;
line-height: 1.6; /* 相当于 22.4px 的行高 */
}除了数值，
line-height还可以使用相对单位（如
em）或百分比。使用相对单位可以使行高相对于
font-size进行缩放，更具灵活性。
line-height 和 word-wrap、overflow-wrap 的区别是什么？
line-height控制的是行间距和文本的垂直对齐，并不直接控制换行。控制换行的是
word-wrap(现在更推荐使用
overflow-wrap) 和
word-break属性。
overflow-wrap: break-word;
(之前是word-wrap: break-word;
) 允许浏览器在单词内部换行，防止长单词溢出容器。这是最常用的换行方式。word-break: break-all;
强制在单词内的任何字符间断行，主要用于处理 CJK 字符（中文、日文、韩文），但也可以用于其他语言。word-break: keep-all;
不允许 CJK 字符断行。
例如，如果一个
div的宽度有限，并且包含一个很长的单词，那么：
<div style="width: 200px; border: 1px solid black;"> ThisIsAVeryLongWordThatWillOverflow </div> <div style="width: 200px; border: 1px solid black; overflow-wrap: break-word;"> ThisIsAVeryLongWordThatWillOverflow </div>
第一个
div中的单词会溢出，而第二个
div中的单词会在容器内换行。
line-height影响的是文本的垂直空间，而
overflow-wrap和
word-break控制的是文本在水平方向上的换行行为。两者共同决定了文本在容器中的显示效果。
