在css项目里，文字排版拥挤是很多开发者都会遇到的痛点，尤其是长文本段落如果行高设置不合理，用户阅读时很容易产生视觉疲劳。line height属性就是专门用来控制文本行之间垂直距离的，合理调整它就能有效解决文字拥挤的问题。
line height的基本定义与取值方式
line height指的是文本行基线之间的垂直距离，它会影响每一行文本所占的垂直空间。这个属性可以继承，也可以单独给某个元素设置，常见的取值方式有以下几种：
- 数值：直接写数字，比如1.5，代表行高是当前字体大小的1.5倍，这是最推荐的取值方式，子元素继承的是这个数值而不是固定像素值
- 像素值：比如24px，设置固定的行高像素，子元素会继承这个固定值，不会随自身字体大小变化
- 百分比：比如150%，代表行高是当前字体大小的150%，子元素继承的是计算后的固定像素值
- normal：默认值，由浏览器自动计算，不同浏览器的默认值可能有差异，通常在1.2左右
不同场景下的line height优化方案
普通段落文本优化
对于正文段落，文字拥挤的核心原因是行高过小，一般建议设置行高为字体大小的1.5到1.8倍。比如字体大小是16px，行高设置为1.6倍的话，每行文本的垂直空间会更宽松，阅读时不会觉得文字挤在一起。
以下是普通段落的css设置示例：
/* 基础段落样式设置 */
.text-paragraph {
font-size: 16px;
/* 设置行高为字体大小的1.6倍，解决文字拥挤问题 */
line-height: 1.6;
/* 可选：设置段落之间的间距，进一步提升阅读体验 */
margin-bottom: 16px;
}
标题文本优化
标题的字体通常比正文大，如果行高设置和正文一样的比例，可能会显得标题内部文字过于松散。标题的行高建议设置为字体大小的1.2到1.4倍，既能避免文字拥挤，也不会让标题显得过于空旷。
标题的css设置示例：
/* 一级标题样式 */
h1 {
font-size: 32px;
/* 标题行高设置为1.3倍，适配大字体场景 */
line-height: 1.3;
margin-bottom: 20px;
}
/* 二级标题样式 */
h2 {
font-size: 24px;
line-height: 1.4;
margin-bottom: 16px;
}
多行文本容器适配
如果文本容器有固定高度，还需要考虑行高和容器高度的适配，避免出现文字溢出或者容器内留白过多的情况。可以通过计算行高和行数，让文本在容器内垂直居中或者合理分布。
固定高度容器的文本适配示例：
/* 固定高度的文本容器 */
.text-container {
width: 300px;
height: 120px;
font-size: 14px;
/* 行高设置为20px，6行文本刚好占满120px高度 */
line-height: 20px;
border: 1px solid #eee;
padding: 10px;
/* 超出部分隐藏，避免文字拥挤溢出 */
overflow: hidden;
}
line height使用的注意事项
首先要注意继承的问题，如果使用像素值或者百分比设置line height，子元素的字体大小如果和父元素不同，行高不会自动适配子元素的字体，可能导致子元素文字依然拥挤。所以优先使用数值类型的line height取值。
其次，line height会影响行内元素和行内块元素的垂直对齐，比如图片和文字混排的时候，如果行高设置过大，图片可能会和文字不对齐，这时候可以适当调整行内块元素的vertical-align属性来修正。
最后，不要给所有元素统一设置line height，比如表单里的<input>、<button>等元素，本身有默认的行高样式，强制覆盖可能会导致元素内部文字显示异常，应该只给文本类元素设置合适的line height。
常见问题解答
设置了line height还是觉得文字拥挤怎么办
可以检查是否同时设置了letter-spacing（字符间距）和word-spacing（单词间距），如果这两个属性值过小，即使行高合适，文字依然会显得拥挤。可以适当增加字符间距，比如设置letter-spacing: 0.5px，进一步提升文字的舒展度。
line height可以设置小于1的值吗
可以，但是只适合特殊场景，比如标题需要紧凑排列，或者某些装饰性文字。普通正文不建议设置小于1的行高，会导致文字上下重叠，严重影响阅读。
cssline_height文字排版阅读体验修改时间：2026-07-20 22:45:32