React Material UI Box 文本超出了 div

Question

我正在尝试构建一个简单的反应页面，但我一开始就卡住了：我的文本开箱即用，我不明白为什么会这样。

有人可以看看我的风格吗？ Picture with the inherited styles

如果我删除whiteSpace="nowrap"，文本会在下面。 我的目标是在图片底部添加和文本。 有人知道问题可能出在哪里吗？提前非常感谢！

HeaderMui.js

 const url = process.env.PUBLIC_URL + "/img/castle.jpg";
const useStyles = makeStyles((主题 => ({

标题：{
    高度：“57vh”，
  背景：url(${url}),
  背景尺寸：“封面”，
  alignItems：“中心”，
  justifyContent: "中心",
  alignItems：“中心”，
  backgroundPosition: "中心中心",
  背景附件：“固定”，
  弹性增长：1，
},

标题文本：{
  文本对齐：“左”，
  字体大小：20，
  线高：20，
  boxSizing: "边框框",
  显示：'内联块'，
  alignItems：“中心”，
  文本对齐：“中心”
},
文本包装器：{

display: "block",
paddingRight: 15,
paddingLeft: 15,
alignItems: "center"


},

}

)));

function HeaderMui() {
  const classes = useStyles();

  return (
    <Box className={classes.header} flexWrap="nowrap">
    <Box className={classes.textWrapper} width="100%" flexWrap="nowrap">
    <h2 >Hogwarts Online</h2>
      < Box component="span" className={classes.headerText} display="inline-block" flexWrap="wrap" whiteSpace="nowrap"> Hogwarts Online is the first platform out there for the wizards far away from Hogwarts. Experience the power of British magical education while still working muggle job. All you need is a magic wand and to be a proved wizard!</Box>
      </Box>
    </Box>
  );
}
export default HeaderMui;


App.js

function App(){

const greaterThanSm = useMediaQuery(theme => theme.breakpoints.up("sm"));
const greaterThanMd = useMediaQuery(theme => theme.breakpoints.up("md"));
    return (
        <>
      <Hidden only="xs">
        <AppbarMui />
      </Hidden>
      <Grid container spacing={3}>
        <Grid
          item
          xs={12}
          md={7}
          lg={12}
        >
        <HeaderMui />
        </Grid>
      </Grid>
    </>
  );
}

export default App;

Answer 1

赫敏。

我认为您遇到的问题肯定是因为 headerText 类中的boxSizing: "border-box",。

请查看此文档，https://www.w3schools.com/css/css3_box-sizing.asp

box-sizing 允许我们拥有特定元素的总宽度和高度中的内容。这就是为什么如果内容的 width + padding + margin 大于父元素的宽度，则内容会超出父元素的区域。

希望这会有所帮助。 :)