引言
在使用CSS排版时，我们经常遇到文本超出宽度而被排在下一行的情况。如果调整行间距不当，会导致排版不美观。本文将详细介绍如何调整行间距解决这一问题。
问题描述
在CSS中，如果一个块级元素（如div）的宽度不足以显示内部所有文本，则文本会被截断并在下一行显示。为了避免这种情况，我们可以使用CSS中的“text-overflow”属性来让文本在超出宽度时隐藏或显示省略号。但是，在文本过长时，即使没有被截断，也可能会被挤压到下一行。这时候，我们就需要调整行间距。
计算行间距
在调整行间距之前，我们需要了解如何计算行间距。行间距是指每一行文字的上下间距之和。在CSS中，行间距由两个属性控制：line-height和margin。
line-height是行高，即每行文字的高度。它可以是一个数字，也可以是一个百分比值。如果使用数字，则表示字体大小的倍数。如果使用百分比，则表示相对于字体大小的比例。例如：
p {
font-size: 16px;
line-height: 1.5; /* 行高为1.5倍字体大小 */
}
margin是文字上下的外边距。它可以是一个数值，也可以是一个百分比值。如果是数值，则表示长度单位（如px、em）。如果是百分比，则表示相对于行高的比例。例如：
p {
font-size: 16px;
line-height: 24px;
margin-top: 12px; /* 上边距为行高的一半 */
margin-bottom: 12px; /* 下边距为行高的一半 */
}
在上面的例子中，每行的行高为24px，上下外边距各为12px，因此每行的总高度为48px。
调整行间距
当文本超出宽度时，我们需要调整行间距以放宽对文本的限制。我们可以通过以下两种方式来实现。
1. 调整line-height
通过调整line-height来调整行间距是最简单的方式。我们可以把line-height设置为一个比较大的数值，例如：
p {
font-size: 16px;
line-height: 2; /* 行高为2倍字体大小 */
}
这样，即使文本很长，每行的高度也足够大，文本就不会被挤压到下一行了。但是，这种方式也会让行间距显得过大，影响排版美观。因此，我们还需要调整margin。
2. 调整margin
通过调整margin来调整行间距稍微麻烦一些，但可以让排版更美观。我们可以减小上下外边距的值，例如：
p {
font-size: 16px;
line-height: 24px;
margin-top: 6px; /* 上边距为行高的1/4 */
margin-bottom: 6px; /* 下边距为行高的1/4 */
}
这样，行间距就不会显得那么大了，而且排版更美观。
调整行间距示例
以下是一个调整行间距的示例。当窗口宽度小于300px时，文本会被挤压到下一行，但行间距依然保持不变。
<div class="wrapper">
<p>这是一段很长很长的文本，会被挤压到下一行，但行间距依然保持不变。</p>
</div>
.wrapper {
width: 300px;
padding: 20px;
background-color: #f1f1f1;
}
p {
font-size: 16px;
line-height: 24px;
margin-top: 6px;
margin-bottom: 6px;
}
@media (max-width: 300px) {
p {
line-height: 32px; /* 文本超出宽度时调整行间距 */
}
}
注意：调整行间距时，我们需要考虑文本的长度、字体大小和行高。如果字体大小和行高都比较大，调整行间距时需要特别小心，以免影响排版美观。
总结
调整行间距是解决文本超出宽度排在下一行的问题的有效方式。我们可以通过调整line-height或margin来实现。在调整行间距时，我们需要考虑文本的长度、字体大小和行高，以保证排版美观。