MathJax does have an automatic line-break option, which you can turn on using
MathJax.Hub.Config({
"HTML-CSS": {linbreaks: {automatic: true}},
CommonHTML: {linbreaks: {automatic: true}},
SVG: {linbreaks: {automatic: true}}
});
But note that it has its limitations, and that it is based on the MathML line-breaking algorithm. In MathML, line breaks only occur at <mo> and <mspace> elements, but something like your line of d's produces a sequence of <mi> elements. So no line break will occur between them, even if the line is very long.
Similarly, MathJax's line breaking algorithm won't break a table cell unless the cell itself is wider than container width (which doesn't take any other columns into account). Since alignments like the one in your second image are created using tables, it is unlikely that the automatic line breaking will help with that. Also, the fact that it is a wide fraction that is causing the overflow makes that even harder to break appropriately.
So you can try turning on the automatic line breaking, but it may not be sufficient for your needs. You may have to break the lines yourself in some cases in order to get better results.
Davide