I am looking to have the "remaining books count" and "remaining pens count text" automatically move to the next line below the numbers when they exceed two digits, causing an overflow in their parent div.
Here is the code snippet I currently have:
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;
`;
If the digit does not exceed 3 and therefore does not overflow within the View of the Text component, then I want the text "remaining books count" and "remaining pens count" to be displayed as shown in the example image.
https://i.sstatic.net/WK2MK.png
However, if the digit is more than 2 resulting in an overflow in the parent div, I would like the text "remaining books count" and "remaining pens count" to automatically move to the next line as demonstrated here.
https://i.sstatic.net/YtwON.png
I am seeking advice on how to achieve this layout adjustment, preferably using CSS. Alternatively, a JavaScript solution would also be acceptable. Can someone assist me with this? Thank you.
EDIT:
The Text component must be reusable. The text "remaining books count" and "remaining pens count" should only span to the next line when used within the Main component and nowhere else...