CSS中white-space: pre-line能否设特定高度？能否单独调整换行间距？

一、能否为white-space: pre-line设置特定高度？ #

当然可以，但得先理清逻辑：white-space: pre-line本身只是负责文本的空白处理规则——保留内容里的换行符、合并连续空格、自动换行，它并不直接控制元素高度。你需要给应用了这个属性的容器元素设置高度，比如：

.text-container {
  white-space: pre-line;
  height: 200px; /* 固定高度 */
  max-height: 300px; /* 可选：设置最大高度，内容超出时显示滚动条 */
  overflow-y: auto;
}

这样容器就会拥有你想要的特定高度，同时pre-line的文本处理规则依然正常生效。

二、如何单独调整pre-line产生的换行间距（不影响常规line-height）？ #

这确实有点棘手，因为pre-line识别的硬换行（内容里的\n）和文本自动换行，在CSS里是被同等对待的，默认都受line-height控制。如果你只想让硬换行的间距更大，常规CSS没法直接区分这两种换行，这里给你两个可行的方案：

方案1：用JavaScript替换硬换行并添加自定义样式

把内容里的\n替换成带自定义类的<br>标签，然后给这个标签设置额外间距：

// 假设文本容器的类是.text-container
const container = document.querySelector('.text-container');
container.innerHTML = container.textContent.replace(/\n/g, '<br class="hard-break">');

搭配CSS：

.text-container {
  white-space: normal; /* 因为已经用br处理换行，pre-line可以换成normal */
  line-height: 1.5; /* 你的常规行高 */
}

.hard-break {
  display: block;
  margin-bottom: 0.8em; /* 这里设置硬换行的额外间距 */
  content: "";
}

这样常规自动换行的行高保持不变，而硬换行的地方会多出你设置的间距。

方案2：将硬换行分隔的文本块独立包裹

如果你的文本内容是可控的，也可以把每个硬换行分隔的部分放在单独的容器里，比如<span class="line-block">，再给这些容器设置间距：

<div class="text-container">
  <span class="line-block">第一行很长，会因为宽度不够自动换行</span>
  <span class="line-block">第二行，这是硬换行后的内容</span>
</div>

.text-container {
  line-height: 1.5; /* 常规行高 */
}

.line-block {
  display: block;
  margin-bottom: 0.8em; /* 硬换行的间距 */
}

这种方法不需要JS，适合文本内容可以提前处理的场景。

目前纯CSS还没法直接区分自动换行和硬换行，所以上面的两种方案是比较实用的替代思路。

内容的提问来源于stack exchange，提问作者user3808307