ReactJS Web应用移动端和平板端溢出问题求助

问题分析 #

移动端/平板视图下标签数量较多时出现水平滚动，核心原因是标签容器未设置自动换行，导致标签单行排列超出视口宽度；同时父容器可能存在宽度未限制、溢出控制缺失的问题。

具体解决方案 #

1. 给标签容器添加自动换行与宽度限制

假设AboutInfoItem组件内部的标签列表使用flex布局，需为其添加flex-wrap: wrap，确保标签一行放不下时自动换行，同时限制容器宽度占满父元素：

.tag-list {
  display: flex;
  flex-wrap: wrap; /* 关键：开启自动换行 */
  gap: 1rem; /* 保持标签间间距，可按需调整 */
  width: 100%; /* 强制容器不超出父元素宽度 */
}

2. 给父容器添加溢出兜底控制

在现有样式中，为.about__info__item添加溢出控制，防止容器本身超出视口：

.about__info__item {
  margin-bottom: 10rem;
  width: 100%;
  overflow-x: hidden; /* 兜底隐藏水平方向溢出内容 */
}

3. 修正原样式语法错误

原样式中.about__subheading span存在两处语法错误，需修正：

• padding: 0%.5rem → padding: 0.5rem（移除无效百分号）
• border: 8px → border-radius: 8px（若为设置圆角需求）

修改后的完整样式示例 #

const AboutPageStyles = styled.div`
  padding: 20rem 0 10rem 0;
  .top-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  .left {
    flex: 3;
  }
  .right {
    flex: 2;
  }
  .about__subheading {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    span {
      background-color: var(--deep-dark);
      padding: 0.5rem; /* 修正语法错误 */
      border-radius: 8px; /* 修正语法错误，设置圆角 */
    }
  }
  .about__heading {
    font-size: 3.6rem;
    margin-bottom: 3rem;
  }

  .about__info {
    margin-bottom: 4rem;
    .para {
      max-width: 100%;
    }
  }
  .button {
    font-size: 2.2rem;
    background-color: ${(props) =>
      props.outline ? 'transparent' : 'var(--gray-1)'};
    padding: 0.3em 1em;
    border-radius: 8px;
    display: inline-block;
    border: 2px solid var(--gray-1);
    color: ${(props) => (props.outline ? 'var(--gray-1)' : 'black ')};
  }

  .right {
    img {
      border: 1px solid var(--gray-1);
      border-radius: 10px;
    }
  }
  .about__info__items {
    margin-top: 15rem;
  }

  .about__info__item {
    margin-bottom: 10rem;
    width: 100%;
    overflow-x: hidden; /* 添加溢出控制 */
  }
  .about__info__heading {
    font-size: 3.6rem;
    text-transform: uppercase;
  }

  /* 新增标签容器样式 */
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
  }

  @media only screen and (max-width: 768px) {
    padding: 10rem 0;
    .top-section {
      flex-direction: column;
      gap: 5rem;
    }
    .about__subheading {
      font-size: 1.8rem;
    }

    .about__heading {
      font-size: 2.8rem;
    }
    .about__info__heading {
      font-size: 3rem;
    }
    .button {
      font-size: 1.8rem;
    }
  }
`;

组件层调整（若AboutInfoItem为独立组件） #

如果AboutInfoItem是单独的Styled Component，需在其内部样式中添加标签列表的换行控制：

const AboutInfoItemStyles = styled.div`
  /* 原有样式 */
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
  }
`;

内容的提问来源于stack exchange，提问作者Danul Hivi Vihan