使用 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>