英文:
How to fix the sentence going outside from the box material ui
问题
我正在使用Material UI。
我想把文本放在框内，但在想要响应式时，文本会超出框外。
注意：我已经尝试过Stack Overflow 的其他解决方案，如word-wrap、max-width、min-width，但都不起作用。
代码如下：
<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>
英文:
I am using Material UI..
I want to place the texts inside the box but when want to make responsive ,the texts are going outside of thr box.
Note : I have already tried other solutions of stackover flow like word-wrap, max-width,min-width but did not work.
code is,
<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>
答案1
得分: 1
你可以使用Text overflow CSS属性：
<Box
sx={{
"&:hover": {
cursor: "pointer",
textDecoration: "underline"
},
overflow: "hidden",
textOverflow: "ellipsis"
}}
>
<Link href="#" underline="none">
https://www.facebook.com/caitlyn.kerluke
</Link>
</Box>
演示链接：https://codesandbox.io/s/elated-gauss-09yww7?file=/src/App.js
你可以在官方文档中了解更多信息：https://mui.com/system/display/#text-overflow
英文:
You can use the Text overflow css property:
<Box
sx={{
"&:hover": {
cursor: "pointer",
textDecoration: "underline"
},
overflow: "hidden",
textOverflow: "ellipsis"
}}
>
<Link href="#" underline="none">
https://www.facebook.com/caitlyn.kerluke
</Link>
</Box>
Live demo here: https://codesandbox.io/s/elated-gauss-09yww7?file=/src/App.js
You can read more about it on official doc: https://mui.com/system/display/#text-overflow
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论