React Material UI框文本超出div

Question

我试图构建一个简单的react页面，但一开始就被卡住了：我的文本开箱即用，我不明白为什么会发生这种情况。

有人能看看我的风格吗？具有继承样式的图片

如果我删除whiteSpace="nowrap"，文本将在下面显示。我的目标是把和文字放在图片的底部。有人知道问题出在哪里吗？提前非常感谢！

HeaderMui.js

const url=process.env.PUBLIC_url+"/img/cacastle.jpg"；const useStyles=makeStyles((主题=>(｛
页眉：{高度："57vh"，背景：CCD_ 2，backgroundSize："封面"，alignItems："中心"，justifyContent："中心"，alignItems："中心"，backgroundPosition："中心-中心"，backgroundAttachment："固定"，flexGrow:1，}，
headerText：{text对齐："左"，font大小：20，lineHeight:20，boxSizing："边框框"，display:'内联块'，alignItems："中心"，text对齐："居中"}，text包装：｛
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

Hermine。

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

请检查这些文档，https://www.w3schools.com/css/css3_box-sizing.asp

box-sizing允许我们在特定元素的总宽度和总高度中具有内容。这就是为什么如果内容的宽度+填充+边距大于父元素的宽度，则内容将超出父元素的区域。

希望这会有所帮助。：(