我正在使用 ReactJS 和名为 MaterialUI 的组件库。我在使用 Typography 组件时遇到问题。
发生的情况是,如果我写一个长文本,它会超出其容器并且不会换行:
import React from "react";
import { Redirect } from "react-router";
import { withRouter } from "react-router-dom";
import Container from "@material-ui/core/Container";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
function Homepage() {
return (
<div>
<React.Fragment>
<CssBaseline />
<Container fixed>
<Typography variant="h1" component="h2" align="center">
123 456 789 qwertyuiopasdfghjklzxcvbnm
</Typography>
</Container>
</React.Fragment>
</div>
);
}
export default withRouter(Homepage);
在图像下方:
这发生在移动模式和桌面模式中。
你知道如何解决这种行为吗?如果已达到容器的最大宽度,我希望将长单词拆分为新行。
最佳答案
解决方案
使用 word-wrap ,它适用于 Material-UI 的排版。
wordWrap: "break-word"
引用:QA: wrap long string without any blank演示
<Typography
variant="h1"
component="h2"
align="center"
style={{ wordWrap: "break-word" }}
>
123 456 789 qwertyuiopasdfghjklzxcvbnmdfsafasfasfadfaf
</Typography>
在线尝试:关于javascript - React - Material UI Typography 如何将长字符串分成多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60631419/