Как сделать так, чтобы текст отображался в следующей строке, когда он переполняет родительский div с использованием css или javascript?

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;
 `;

, когда di git меньше 3, другими словами не переполняется в представлении компонента Text, тогда я хочу, чтобы текст «счетчик оставшихся книг» и «оставшиеся количество ручек "для отображения, как показано ниже

, когда di git больше 2 или, другими словами, переполняет родительский div, тогда я хочу текст «счетчик оставшихся книг» и «счетчик оставшихся ручек» для перехода к следующей строке, как показано ниже

Как я могу сделать это, предпочтительно используя CSS? или решение javascript тоже подойдет. Может ли кто-нибудь помочь мне с этим? спасибо.

РЕДАКТИРОВАТЬ:

Текстовый компонент можно использовать повторно. Я хочу, чтобы текст «счетчик оставшихся книг» «счетчик оставшихся перьев» переходил в следующую строку только при использовании в компоненте Main и нигде больше ...

Answer 1

Решит ли это вашу проблему? Просто добавьте wrapper--two-lines класс, когда 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>

Answer 2

Вы можете попробовать добавить 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;
`;