文档加载时文本换行，DIV高度计算不准确问题咨询

这个问题我之前也碰到过，核心原因就是**document.ready的触发时机太早了**——它只保证DOM结构加载完成，但浏览器还没彻底完成页面的布局渲染，尤其是当文本换行依赖视口宽度时，渲染引擎还没来得及计算换行后的实际高度，就返回了之前的默认值（也就是你看到的32px）。而窗口resize的时候，浏览器会强制触发重排（reflow），重新计算所有元素的布局，这时候自然能拿到正确的高度。

下面给你几个靠谱的解决办法，按推荐优先级排序：

1. 改用window.load事件 #

window.load会等所有资源（样式、图片、字体等）都加载完毕，并且页面布局完全渲染好之后才触发，这时候去获取div高度肯定是准确的：

$(window).on('load', function() {
  const divHeight = $('#yourDiv').height();
  console.log(divHeight);
});

2. 用requestAnimationFrame监听下一次重绘 #

这是更优雅的方式，它会在浏览器下一次重绘前执行代码，确保布局计算已经完成，比setTimeout更精准：

$(document).ready(function() {
  requestAnimationFrame(() => {
    const divHeight = $('#yourDiv').height();
    console.log(divHeight);
  });
});

3. 延迟获取（兜底方案） #

如果因为某些场景不能用上面两种方法，就给浏览器留一点渲染时间，用setTimeout延迟100-200ms（别太长，不然影响用户体验）：

$(document).ready(function() {
  setTimeout(() => {
    const divHeight = $('#yourDiv').height();
    console.log(divHeight);
  }, 200);
});

4. 通用方案：同时处理初始加载和窗口resize #

如果需要页面加载时就拿到正确高度，同时窗口变化时也能更新，可以把逻辑抽成函数，结合window.load和resize事件：

function getDivHeight() {
  const divHeight = $('#yourDiv').height();
  console.log(divHeight);
  // 这里放你需要用高度做的后续逻辑
}

$(window).on('load', function() {
  getDivHeight();
  // 绑定resize事件，建议加防抖避免频繁触发
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(getDivHeight, 200);
  });
});

最后提醒下：先检查下你的div有没有设置固定高度height:32px？如果有，那不管文本怎么换行，高度都不会变，这时候要改成min-height或者直接去掉固定高度，让元素自适应内容高度。

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