CSS中line-height怎么影响换行_CSS中line-height对换行影响-css教程-PHP中文网

CSS中line-height怎么影响换行_CSS中line-height对换行影响

星夢妙者

发布： 2025-09-05 18:55:01

原创

863人浏览过

line-height通过设定行框高度影响文本垂直对齐与行间距，值大于font-size时文本居中且行间距增大，提升可读性；配合overflow-wrap等控制换行的属性，共同优化文本显示效果。

css中line-height怎么影响换行_css中line-height对换行影响

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

登录后复制

可以提高可读性，减少眼睛的疲劳。

例如：

影谱

汉语电影AI辅助创作平台

查看详情

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>

登录后复制

第一个