如何为jQuery动态生成的文本预留空间避免下方元素被挤下移

以下两种方案均适配Bootstrap响应式规则，不需要写固定px值，可直接搭配jQuery使用：

方案1：提前计算最大高度预占位置 #

适合提前知道所有可能出现的动态文本内容的场景，首次加载时自动计算最大高度，给容器设置最小高度兜底：

$(function() {
  const $dynamicDiv = $('#你的动态div选择器');
  // 备份原有内容
  const originalContent = $dynamicDiv.html();
  // 替换为所有可能出现的最长文本，计算当前容器宽度下的自然高度
  $dynamicDiv.html('预设的最长动态文本内容');
  const maxHeight = $dynamicDiv.height();
  // 设置最小高度兜底，内容超过高度时仍可正常自适应撑开
  $dynamicDiv.css('minHeight', maxHeight + 'px');
  // 还原原有内容
  $dynamicDiv.html(originalContent);

  // 可选：监听窗口大小变化时重新计算高度，适配响应式布局变动
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      $dynamicDiv.css('minHeight', 'auto');
      $dynamicDiv.html('预设的最长动态文本内容');
      const newMaxHeight = $dynamicDiv.height();
      $dynamicDiv.css('minHeight', newMaxHeight + 'px');
      $dynamicDiv.html(originalContent);
    }, 200);
  });
})

方案2：同步占位层实现自适应高度 #

不需要提前知道最长文本，直接用Bootstrap自带工具类搭配双内容层实现：

1. 调整HTML结构 #

<!-- 外层容器用Bootstrap自带的相对定位类 -->
<div class="dynamic-text-wrapper position-relative">
  <!-- 实际显示层，绝对定位铺满容器 -->
  <div class="dynamic-text-content position-absolute top-0 start-0 w-100"></div>
  <!-- 占位层，仅用来撑开高度，用visibility:hidden隐藏不占交互层级 -->
  <div class="dynamic-text-placeholder visibility-hidden"></div>
</div>

2. 绑定文本更新逻辑 #

每次更新动态文本时同时给两个层赋值，占位层会自动撑开外层高度，不会出现切换时的高度跳变：

function updateText(newText) {
  $('.dynamic-text-content').html(newText);
  $('.dynamic-text-placeholder').html(newText);
}

你之前尝试隐藏虚拟文本没有生效，核心原因是没有做到内容更新时和实际显示层完全同步，仅在删除文本时添加虚拟文本就会出现高度差。

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