Is there a way to dynamically adjust font-size so that text always takes up 80% of its container whilst staying on one line? React solution needed

Question

                        <Box>
                            <Typography
                                fontSize={'7vh'}
                                textAlign={'center'}
                                sx={{
                                    [theme.breakpoints.down('md')]: { fontSize: '5.5vh' },
                                    [theme.breakpoints.down('sm')]: { fontSize: '3vh' }
                                }}>
                                {item.name}
                            </Typography>
                        </Box>

As you can see from my code I am currently using materialUI breakpoints to adjust font-size based on screen size. The problem is that sometimes 'item.name' is really long and the text wraps onto a new line. I'd like it so that the font-size is dynamically made smaller if the text is long so that it stays on one line. Likewise, if the text is really short I would like for font-size to increase. Is there a way to do this so that in all cases the text stays on one line and takes up around 80% of the parent container's width?

Although this may not immediately solve your problem, container queries are now a thing on Chrome and Safari. You can size your text off the size of the container. https://css-tricks.com/say-hello-to-css-container-queries/ — Adam, Sep 04 '22 at 17:09

Is there a way to dynamically adjust font-size so that text always takes up 80% of its container whilst staying on one line? React solution needed

0 Answers0