如何在Flexbox中实现文本换行且不破坏布局？

问题场景 #

我有一个包含文本的Flexbox容器，当文本内容增多时，布局会出现错乱。使用styled-components实现的相关代码如下：

React + Styled Components代码 #

<styled.SpecsData key={index}>
    <Text fontSize="16px" lineHeight="32px" fontFamily="PT Sans Bold" color="colorPrimary">
        {spec?.name}
    </Text>
    <styled.SpecDataValues> 
       <Text fontSize="16px" lineHeight="32px" color="colorPrimary">
          {spec?.value}
          {spec?.units}
       </Text>
    </styled.SpecDataValues>
</styled.SpecsData>

export const SpecsData = styled.div`
    max-width: 100%;
    height: max-content;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: ${({ theme }) => theme.colors.gray};
`

export const SpecDataValues = styled.div`
    display: flex;
    flex-wrap: wrap;
`

const Text = css`
    color: ${ props => ({ theme }) => theme.colors[props.color] || theme.colors.grayDark };
    font-size: ${ props => props.fontSize || "14px"};
    font-family: ${ props => props.fontFamily || "PT Sans"};
    line-height: ${ props => props.lineHeight || "32px"};
    letter-spacing: ${ props => props.letterSpacing || "0.019rem" };
    margin: ${ props => props.margin || "0" };
    ${media.desktop`
        font-size: ${ props => props.fontSizeDesktop };
        line-height: ${ props => props.lineHeightDesktop };
    `}
`

简化示例代码 #

CSS

.spec-data {
  max-width: 100%;
  height: max-content;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #757575;
  color: white;
}

.spec-data-values {
  display: flex;
  flex-wrap: wrap;
}

HTML

<div class="spec-data">
  <p>
   this is a test
  </p>
  <div class="spec-data-values">
    <p>
    testing 1 2 3
    </p>
    <p>
     testing 4 5 6 7 8 testing 9 10 11 12 14 14 15 16 17 18 19 20 21
     22 23 24 25 26 27 28 29 30
    </p>
  </div>
</div>

需要调整代码，让文本内容增多时自动换行且不破坏原有布局。

修复方案 #

问题核心在于父容器SpecsData使用了align-items: center，当子元素文本换行高度增加时，会导致整体布局错位；同时文本元素缺少明确的换行控制和宽度限制。可以通过以下几步修复：

• 调整父容器的对齐方式
  将SpecsData的align-items从center改为flex-start，确保子元素文本换行时，容器能自适应高度，避免垂直居中导致的布局偏移：

  export const SpecsData = styled.div`
      max-width: 100%;
      height: max-content;
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start; /* 修改这里 */
      background-color: ${({ theme }) => theme.colors.gray};
  `
  

• 为文本容器设置宽度限制与换行规则
  给SpecDataValues添加max-width（比如设置为60%或根据需求调整），同时确保内部文本能自动换行：

  export const SpecDataValues = styled.div`
      display: flex;
      flex-wrap: wrap;
      max-width: 60%; /* 添加宽度限制 */
      gap: 8px; /* 可选：增加元素间间距，提升可读性 */
  `
  

• 确保Text组件支持自动换行
  在Text的css规则中添加word-wrap: break-word和white-space: pre-wrap，强制长文本自动换行：

  const Text = css`
      color: ${ props => ({ theme }) => theme.colors[props.color] || theme.colors.grayDark };
      font-size: ${ props => props.fontSize || "14px"};
      font-family: ${ props => props.fontFamily || "PT Sans"};
      line-height: ${ props => props.lineHeight || "32px"};
      letter-spacing: ${ props => props.letterSpacing || "0.019rem" };
      margin: ${ props => props.margin || "0" };
      word-wrap: break-word; /* 添加换行控制 */
      white-space: pre-wrap; /* 保留空格同时允许换行 */
      ${media.desktop`
          font-size: ${ props => props.fontSizeDesktop };
          line-height: ${ props => props.lineHeightDesktop };
      `}
  `
  

• 可选：为左侧标题文本设置最小宽度
  如果希望左侧的spec.name保持固定宽度或最小宽度，避免被压缩，可以给左侧Text组件的父元素（或直接给Text）添加min-width：

  <styled.SpecsData key={index}>
      <div style={{ minWidth: "150px" }}> {/* 添加容器设置最小宽度 */}
          <Text fontSize="16px" lineHeight="32px" fontFamily="PT Sans Bold" color="colorPrimary">
              {spec?.name}
          </Text>
      </div>
      <styled.SpecDataValues> 
         <Text fontSize="16px" lineHeight="32px" color="colorPrimary">
            {spec?.value}
            {spec?.units}
         </Text>
      </styled.SpecDataValues>
  </styled.SpecsData>
  

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