使用line-height与jQuery计算div高度的实现问题

嘿，我来帮你搞定这个让div高度刚好适配完整文本行的问题！你的需求很明确——让填充满文本的div高度刚好停在完整的一行末尾，不会截断最后一行，对吧？

先看看你现有代码里的小问题：$("body").css('line-height')返回的是带单位的字符串（比如'24px'或者'1.5em'），直接用来做数学计算会出问题，而且Math.ceil可能会让计算出的高度超出可用空间，反而导致截断。我给你调整一下代码，保证逻辑准确：

修正后的JavaScript代码 #

function setIntroHeight() {
  const $body = $('body');
  // 获取行高的原始值和字体大小
  const lineHeightStr = $body.css('line-height');
  const lineHeight = parseFloat(lineHeightStr);
  const fontSize = parseFloat($body.css('font-size'));

  // 处理不同单位的行高：如果是无单位的倍数（比如1.5），要转成实际像素高度
  let actualLineHeight;
  if (lineHeightStr.indexOf('px') === -1 && lineHeight < 2) {
    actualLineHeight = lineHeight * fontSize;
  } else {
    actualLineHeight = lineHeight;
  }

  // 防止获取不到行高的异常情况
  if (!actualLineHeight) return;

  // 计算可用高度空间（和你的逻辑一致：窗口高度 - 窗口宽度的10%）
  const availableHeight = $(window).height() - ($(window).width() * 0.1);
  // 计算能容纳的完整行数，用floor保证高度不超可用空间
  const fullLines = Math.floor(availableHeight / actualLineHeight);
  // 最终div高度 = 完整行数 × 行高
  const targetHeight = fullLines * actualLineHeight;

  // 把高度应用到#intro
  $('#intro').height(targetHeight);
}

// 页面加载时初始化高度
setIntroHeight();
// 窗口大小变化时重新计算，保证适配不同屏幕
$(window).on('resize', setIntroHeight);

对应的CSS调整 #

把你原来固定的height: 55em去掉，让JS动态设置高度就好：

#intro {
  width: 80vw;
  margin: 10vw 0 0 10vw;
  overflow: hidden;
  overflow-wrap: break-word;
  /* 移除固定高度，由JS动态计算 */
}

为什么这样改？ #

• 正确处理行高单位：不管行高是像素、em还是无单位的倍数，都能转成准确的数值用于计算
• 保证高度适配完整行：用Math.floor取最大的完整行数，确保div高度刚好容纳整数行文本，不会截断最后一行
• 响应窗口变化：加上resize事件监听，窗口大小改变时自动重新计算高度，适配不同设备

这样调整后，你的div就能完美实现“内容在折叠线后结束且不截断最后一行”的需求啦！

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