Flexbox移动端：过长动态中间元素的隐藏实现方法

针对你提出的需求——移动端下，当flex布局中间元素文本换行或宽度超过80px时隐藏它，这里提供两种可行方案：

方案一：纯CSS近似实现（适合简单场景） #

通过媒体查询结合flex布局属性，限制中间元素的最大宽度，同时强制单行显示，超出宽度时直接隐藏元素。

修改后的CSS代码：

.App {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center; /* 修正垂直居中方式 */
  gap: 20px;
}

/* 左右元素固定宽度，避免被压缩 */
.App h1 {
  flex-shrink: 0;
}

/* 中间元素占据剩余空间，默认单行显示 */
.App h2 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

/* 移动端适配（以768px为分界，可根据需求调整） */
@media (max-width: 768px) {
  .App h2 {
    max-width: 80px;
    /* 当宽度超过80px时，隐藏元素 */
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
  }
  /* 仅当宽度未超过80px时显示 */
  .App h2:not([style*="width"]) {
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
  }
}

注：这个方案的核心是强制中间元素单行，只要宽度超过80px就隐藏，但无法精准判断“文本换行”（比如元素宽度足够但文本因换行规则换行的情况），适合需求相对宽松的场景。

方案二：CSS+JS精确实现（覆盖所有场景） #

通过JS监听元素尺寸变化，判断元素是否宽度超80px或文本是否换行，动态控制元素的显示状态。

第一步：修改CSS，优化布局 #

.App {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.App h1 {
  flex-shrink: 0;
}

.App h2 {
  flex: 1;
  /* 允许文本自然换行 */
  line-height: 1.2;
  height: 1.2em; /* 单行文本高度 */
}

/* 隐藏类 */
.hidden {
  display: none;
}

第二步：添加JS逻辑，动态判断 #

import "./styles.css";
import { useEffect, useRef } from "react";

export default function App() {
  const middleRef = useRef(null);

  const checkMiddleElement = () => {
    const el = middleRef.current;
    if (!el) return;
    
    // 判断条件：宽度超过80px 或 文本换行（scrollHeight > clientHeight）
    const isTooWide = el.offsetWidth > 80;
    const isWrapped = el.scrollHeight > el.clientHeight;
    
    if (isTooWide || isWrapped) {
      el.classList.add("hidden");
    } else {
      el.classList.remove("hidden");
    }
  };

  useEffect(() => {
    // 初始化检查
    checkMiddleElement();
    // 监听窗口 resize
    window.addEventListener("resize", checkMiddleElement);
    // 监听元素内容变化（如果内容是动态更新的）
    const observer = new MutationObserver(checkMiddleElement);
    observer.observe(middleRef.current, { childList: true, subtree: true });
    
    return () => {
      window.removeEventListener("resize", checkMiddleElement);
      observer.disconnect();
    };
  }, []);

  return (
    <div className="App">
      <h1>LOGO</h1>
      <h2 ref={middleRef}>Start editing to see some magic happen! Long Title</h2>
      <h1>test</h1>
    </div>
  );
}

这个方案通过offsetWidth判断宽度是否超80px，通过scrollHeight和clientHeight的差值判断是否文本换行，同时监听窗口大小变化和元素内容变化，确保动态内容更新时也能正确触发判断。

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