如何使用 React（使用 material-ui 和 react-mathjax-node）在 MathJax 上包装文本答案

【问题标题】：How to wrap text on MathJax using React( with material-ui and react-mathjax-node)如何使用 React（使用 material-ui 和 react-mathjax-node）在 MathJax 上包装文本
【发布时间】：2021-06-12 15:46:47
【问题描述】：

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

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 换行？

【问题讨论】：

标签： reactjs material-ui mathjax

【解决方案1】：

这是因为公式的根元素 (<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

【讨论】：

【解决方案2】：

感谢您的回答！

遗憾的是，我的情况并没有改变。由于字符是 html 意义上的元素（例如，“aaa”是三个 MathJax 元素的复合体），因此“自动换行”可能无效。

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

【讨论】：

当然 :) 请不要使用 cmets 的答案，而是更新您的问题或评论您的问题/我的答案。或者，最好的方法是实际展示您为解决此问题所做的工作，以便其他人可以从您的解决方案中受益。快乐编码:)
当然 :D 我昨天创建了一个帐户。谢谢你的教导！
NP，让我们开始吧:)