JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
"HTML-CSS": {
linebreaks: {
automatic: true,
width: "container"
}
}
});
</script>
<h1 class="entry-title">test-width</h1>
<h2>Formula 1</h2>
<div style="width: 480px" class='example'>
<math id="f1" display="block" overflow="scroll">
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
<mi>A</mi>
<mo>+</mo>
</math>
</div>
<h2>Formula 2</h2>
<div style="width: 480px" class='example'>
<math id="f2" display="block" overflow="scroll">
<mrow>
<mfrac>
<mrow>
<mo>∂</mo>
<mi>Ψ</mi>
</mrow>
<mrow>
<mo>∂</mo>
<mi>t</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mrow>
<msup>
<mi>Ω</mi>
<mn>2</mn>
</msup>
</mrow>
<mrow>
<msup>
<mrow>
<mrow>
<mo>(</mo>
...
CSS
div.example {
background-color: #eee;
}