如何实现：描述高度<234px且屏幕宽≥1280px时隐藏展开按钮

核心逻辑 #

当描述文本容器实际高度 < 234px 且 屏幕宽度 ≥ 1280px 时，隐藏展开按钮。

Svelte 实现示例 #

<script>
  let descriptionElement;
  let descriptionHeight = 0;
  let isWideScreen = false;

  // 监听屏幕宽度变化
  const handleResize = () => {
    isWideScreen = window.innerWidth >= 1280;
  };

  // 获取并监听描述容器高度
  const trackDescriptionHeight = (element) => {
    if (!element) return;

    // 初始化高度
    descriptionHeight = element.offsetHeight;

    // 用ResizeObserver监听容器尺寸变化（适配内容动态更新）
    const observer = new ResizeObserver(() => {
      descriptionHeight = element.offsetHeight;
    });
    observer.observe(element);

    // 组件销毁时清理监听
    return () => observer.disconnect();
  };

  // 初始化屏幕状态
  handleResize();
  // 监听全局窗口 resize
  window.addEventListener('resize', handleResize);
</script>

<!-- 描述文本容器 -->
<div class="description" bind:this={descriptionElement} use:trackDescriptionHeight>
  <!-- 替换为你的实际描述内容 -->
  这里是需要折叠/展开的描述文本...
</div>

<!-- 展开按钮 -->
<button 
  class="expand-btn"
  hidden={descriptionHeight < 234 && isWideScreen}
>
  展开全文
</button>

<style>
  .description {
    max-height: 234px;
    overflow: hidden;
    line-height: 1.5;
    /* 根据需求调整其他样式 */
  }

  .expand-btn {
    margin-top: 16px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #eee;
    cursor: pointer;
  }
</style>

关键细节说明 #

1. 高度检测：通过bind:this获取描述容器DOM，结合ResizeObserver实时追踪容器实际高度（比全局resize更精准，适配内容动态更新场景）；
2. 屏幕宽度判断：监听窗口resize事件，实时更新isWideScreen状态；
3. 按钮控制：直接通过hidden属性绑定逻辑表达式，满足双条件时自动隐藏按钮；
4. 资源清理：组件销毁时断开ResizeObserver和窗口resize监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Myriad-Sun