Automatic linebreaks + max-width + table, unexpected behavior
Created by: ghost
Tested with firefox and chrome, using the latest mathjax from the cdn.
Config:
MathJax.Hub.Config({ "HTML-CSS": { linebreaks: { automatic: true }, width: 'container' }, SVG: { linebreaks: { automatic: true } } });
- Put a math element inside a div with max-width - auto linebreak works.
- Put the same div element inside a table cell - auto linebreak does not work. (It does work if max-width is replaced with width).
- Put a long text line inside the div together with the math - auto linebreak works again.
Examples
<div class='test' style='max-width: 220px; background: #aaa;'>
<math display='inline' indentalign='left'
xmlns='http://www.w3.org/1998/Math/MathML'>
<mn>8.484301322621956</mn>
<mo>+</mo>
<mn>-9.96326680337424</mn>
<mo>+</mo>
<mn>0.5776307876254698</mn>
<mo>+</mo>
<mn>0.7560610719077764</mn>
<mo>+</mo>
<mn>19.07127127805585</mn>
</math>
</div>
<table>
<tr>
<td>
<div class='test' style='max-width: 220px; background: #aaa;'>
<math display='inline' indentalign='left'
xmlns='http://www.w3.org/1998/Math/MathML'>
<mn>8.484301322621956</mn>
<mo>+</mo>
<mn>-9.96326680337424</mn>
<mo>+</mo>
<mn>0.5776307876254698</mn>
<mo>+</mo>
<mn>0.7560610719077764</mn>
<mo>+</mo>
<mn>19.07127127805585</mn>
</math>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class='test' style='max-width: 220px; background: #aaa;'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
<math display='inline' indentalign='left'
xmlns='http://www.w3.org/1998/Math/MathML'>
<mn>8.484301322621956</mn>
<mo>+</mo>
<mn>-9.96326680337424</mn>
<mo>+</mo>
<mn>0.5776307876254698</mn>
<mo>+</mo>
<mn>0.7560610719077764</mn>
<mo>+</mo>
<mn>19.07127127805585</mn>
</math>
</div>
</td>
</tr>
</table>