问题描述
import React from "react";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import MathJax from "@innodoc/react-mathjax-node";
const useStyles = makeStyles((theme) => ({
text: {
overflowWrap: "break-word",},}));
function Example() {
const classes = useStyles();
return(
<Typography className={classes.text}>
<MathJax.Provider>
<MathJax.MathJaxNode texCode="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
</MathJax.Provider>
</Typography>
)
}
我使用了 material-ui 来设计样式。 但是它不起作用。 我附上了屏幕截图,它在 Mac (M1) 上的 Google Chrome 的足够小宽度视图中的外观。
如何在 React 中为 MathJax 自动换行?
解决方法
这是因为公式的根元素 (<mjx-math>
) 具有样式 word-wrap: nowrap
可以防止单词中断。
您可以使用您正在使用的任何 css 技术覆盖此样式。话虽如此,如果没有 word-wrap: nowrap
,等式可能会 look bad,所以我不确定您是否应该这样做。
例如
const useStyles = makeStyles((theme) => ({
text: {
overflowWrap: "break-word",width: 100,"*": {
whiteSpace: "normal"
}
}
}));
打破常规。
https://codesandbox.io/s/vibrant-easley-loyfj
,感谢您的回答!
遗憾的是,在我的情况下它没有改变。 由于字符是 html 意义上的元素(例如,“aaa”是三个 MathJax 元素的复合体),因此“自动换行”可能无效。
(我将只使用论文的标题。这几乎是字母表,但有时包含在数学单词中。谢谢你的好意!)