Utilizing Material UI for my project...
I am trying to contain the text within a box but facing issues with responsiveness as the text is overflowing outside of the box.
Note: I have attempted various solutions from Stack Overflow such as word-wrap, max-width, min-width but none have been successful.
https://i.sstatic.net/9oAmO.png
The code snippet is as follows:
<Stack direction={'row'} spacing={2}>
<Box color={'rgb(24, 119, 242)'}><FacebookIcon /></Box>
<Box
sx={{
'&:hover': {
cursor: 'pointer',
textDecoration: 'underline',
},
}}
>
<Link href="#" underline="none">
https://www.facebook.com/caitlyn.kerluke
</Link>
</Box>
</Stack>
<Stack direction={'row'} spacing={2}>
<Box color={'rgb(224, 45, 105)'}><InstagramIcon /></Box>
<Box
sx={{
'&:hover': {
cursor: 'pointer',
textDecoration: 'underline',
},
}}
>
<Link href="#" underline="none">
https://www.instagram.com/caitlyn.kerluke
</Link>
</Box>
</Stack>
<Stack direction={'row'} spacing={2}>
<Box color={'rgb(0, 126, 187)'}><LinkedInIcon /></Box>
<Box
sx={{
'&:hover': {
cursor: 'pointer',
textDecoration: 'underline',
},
}}
>
<Link href="#" underline="none">
https://www.linkedin.com/in/caitlyn.kerluke
</Link>
</Box>
</Stack>
<Stack direction={'row'} spacing={2}>
<Box color={'rgb(0, 170, 236)'}><TwitterIcon /></Box>
<Box
sx={{
'&:hover': {
cursor: 'pointer',
textDecoration: 'underline',
},
}}
>
<Link href="#" underline="none">
https://www.twitter.com/caitlyn.kerluke
</Link>
</Box>
</Stack>