如何在空间不足无法完整显示文本时将对应div设置为隐藏

优先使用兼容性更好的JavaScript方案，纯CSS方案目前标准尚未落地，适配性和准确率不足，不推荐生产环境使用。

JavaScript 实现方案（推荐） #

核心逻辑是对比元素的内容总尺寸和可视区域尺寸，只要内容超出可视边界就直接隐藏整个元素，不会出现文字截断、滚动条的问题。

1. 先写基础结构和样式，增加防闪烁处理，避免页面加载时溢出内容短暂露出：

<div class="quote-block">
  这里放置引用内容
</div>

.quote-block {
  /* 按业务需求设置容器的宽高限制，比如固定宽度、最大高度 */
  width: 100%;
  max-height: 180px;
  /* 初始先隐藏，等JS校验内容可完整展示后再显示 */
  visibility: hidden;
  /* 无需设置overflow: scroll/auto，默认属性即可正常计算尺寸 */
}
.quote-block.visible {
  visibility: visible;
}

如果不需要保留引用区域的占位空间，把上述代码里的visibility属性换成display即可，溢出时设置display: none，元素不占用页面布局位置。

2. 写入检测逻辑，需要等页面所有资源（字体、图片等）加载完成后再计算，避免尺寸测量不准；窗口尺寸变化时重新检测，适配响应式场景：

// 防抖处理，避免窗口缩放时频繁触发计算占用性能
const debounce = (fn, delay = 120) => {
  let timer = null;
  return (...args) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}

const checkQuoteVisibility = () => {
  const quoteList = document.querySelectorAll('.quote-block');
  quoteList.forEach(quoteEl => {
    // 先重置显示状态，保证尺寸计算准确
    quoteEl.classList.remove('visible');
    // 同时判断垂直、水平方向是否存在内容溢出
    const hasOverflow = quoteEl.scrollHeight > quoteEl.clientHeight || quoteEl.scrollWidth > quoteEl.clientWidth;
    // 无溢出则加类显示，溢出则保持隐藏
    if (!hasOverflow) quoteEl.classList.add('visible');
  })
}

// 页面资源加载完成后执行首次检测
window.addEventListener('load', checkQuoteVisibility);
// 窗口大小变化时重新检测
window.addEventListener('resize', debounce(checkQuoteVisibility));

注意：如果引用区域内包含图片、异步嵌入的第三方内容，需要在对应资源加载完成后额外触发一次checkQuoteVisibility检测，避免资源加载后撑大容器导致内容溢出但未被隐藏。

纯CSS实现方案（暂不推荐生产使用） #

目前CSS标准还未正式推出原生的内容溢出检测伪类，现有纯CSS hack方案都存在适配场景有限、判定不准的问题，仅支持Chrome 105+等高版本浏览器的容器查询方案也只能覆盖固定尺寸容器的部分场景，无法适配动态内容、响应式布局的复杂情况，生产环境优先选择上述JS方案。

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