使用 css 或 javascript 溢出父 div 時，如何使文本出現在下一行？

Question

當數字超過兩位數時，換句話說，當它溢出其父 div 時，我希望“剩余書數”和“剩余筆數文本”移動到下一行（在數字下方）。

下面是我的代碼，

function Text() {
    return (
        <wrapper marginTop={marginTop}>
            <View>
                <span>100</span>
                <span>/100</span>
            </View>
           <Text>
               remaining <br />
               <SubText>books count</SubText>
           </Text>
           <Divider />
           <View> 
               <span>100</span>
               <span>/100</span>
           </View>
           <Text>remaining <br />
               <SubText>pens count</SubText>
           </Text>
       </Wrapper>
  );

  const Wrapper = styled.div<{ marginTop?: number }>`
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: ${props => (props.marginTop || 0) + 'px'};
  `;

   const View = styled.div`
       display: flex;
       flex-direction: row;
       align-items: baseline;
       margin-top: 8px;
    `;

     const Text = styled.span`
         margin-left: 8px;
     `;

      const SubText = styled.span`
          white-space: nowrap;
      `;

      const Divider = styled.div`
          height: 37px;
          margin-left: 16px;
          margin-right: 16px;
          border-left: 1px solid grey;
      `;


function Parent() {
    return (
        <Wrapper>
            <LeftWrapper>
                <ContentBox height={30}>
                    <Overview />
                </ContentBox>
                <ContentBox height={70}>
                    <Main /> //this is where the Text component is rendered
                </ContentBox>
            </LeftWrapper>
            <RightWrapper>
                <ContentBox height={100}>
                    //some components rendered                           
                </ContentBox>
            </RightWrapper> 
        </Wrapper>
    );
}

function Main () {
    return (
        <>
            <Text/>
        </>
    )
}

const Wrapper = styled.div`
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
    align-items: center;
    align-self: center;
    align-content: center;
    overflow: hidden;
    width: 1200px;
    height: 500px;
    min-height: 500px;
    max-height: 90vh;
    max-width: 90vw;
    flex: 1;
`;

const LeftWrapper = styled.div`
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 336px;
`;

 const RightWrapper = styled.div`
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 864px;
 `;

  const ContentBox = styled.div<{ height: number }>`
      padding: 12px;
      width: calc(100% - 16px);
      height: calc(${props => props.height}% - 16px);
      margin: ${16 / 2}px;
 `;

當數字小於 3 即未在 Text 組件的視圖中溢出時，我希望將文本“剩余書數”和“剩余筆數”呈現如下

當數字大於 2 或換句話說溢出父 div 時，我希望文本“剩余書數”和“剩余筆數”移動到下一行，如下所示

我怎樣才能最好地使用 CSS 來做到這一點？ 或 javascript 解決方案也可以。 有人可以幫我解決這個問題嗎？ 謝謝。

編輯：

文本組件是可重用的。 我希望文本“剩余書數”“剩余筆數”僅在主要組件中使用時才跨越到下一行，而其他任何地方都沒有......

Answer 1

您可以嘗試添加flex-wrap: wrap; .

<Wrapper marginTop={marginTop}>
 <Section>
   <View>
     <span>100</span>
     <span>/100</span>
   </View>
   <Text>
     remaining <br />
     <SubText>books count</SubText>
   </Text>
 </Section>

 <Divider />

 <Section>
   <View>
     <span>100</span>
     <span>/100</span>
   </View>
   <Text>
     remaining <br />
     <SubText>pens count</SubText>
   </Text>
 </Section>
</Wrapper>;

const Section = styled.div`
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
`;

Answer 2

這會解決你的問題嗎？ 只需添加wrapper--two-lines class 時為 3 位數

 .wrapper { display: flex; margin-top: 20px; }.wrapper--two-lines { flex-wrap: wrap; }.wrapper--two-lines.left-wrapper { width: 100%; }

 <div class="wrapper"> <div class="left-wrapper">10/10</div> <div class="right-wrapper">remaining books count</div> </div> <div class="wrapper wrapper--two-lines"> <div class="left-wrapper">100/100</div> <div class="right-wrapper">remaining books count</div> </div>