前端使用mathJax.js展示数学公式无法自动换行的问题

前言:

最近使用的一款插件math.js按照正常格式展示各种公式，途中遇到不能自动换行的困扰，一步步排查得知标签class名为mjx-chtml的设置强制不换行white-space: nowrap，那么只需要在你所引用的CSS文件中加一行样式即可

话不多说，上代码

全局引用并设置mathJax

messageStyle是公式转化的进度，会显示的页面左下角，用户体验不是很好，SO，我隐藏掉了

<script type="text/javascript"
          src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
      MathJax.Hub.Config({
          messageStyle: 'none',
          jax: ["input/MathML","output/SVG"],
          extensions: ["mml2jax.js","MathEvents.js"]
      })
</script>

// 解决数学公式中的强制不换行
.mjx-chtml{
  white-space: normal!important;
}