我正在使用材質UI..

我想把文本放在盒子里面，但是當我想做出響應時，文本卻在盒子外面。

注意:我已經嘗試了其他的stackover流的解決方案，如自動換行、最大寬度、最小寬度，但是沒有效果。

代碼是，

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

您可以使用文本溢出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官方網站上了解更多