如何使用 React使用 material-ui 和 react-mathjax-node在 MathJax 上换行文本

如何解决如何使用 React使用 material-ui 和 react-mathjax-node在 MathJax 上换行文本

我尝试过自动换行。我在下面写了这段代码。

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 元素的复合体），因此“自动换行”可能无效。

（我将只使用论文的标题。这几乎是字母表，但有时包含在数学单词中。谢谢你的好意！）