title: How to make MathJax responsive and add line breaks automatically?
body: <p>I've read the MathJax documentation for adding line breaks automatically but it seems to have no effect. </p>
  
  <p>I don't know how to make MathJax responsive. My website allows users to write in LaTeX especially for mathematical formulas. However, on mobile screen, sometimes the output is too wide and I need somehow to find a way to resize it.</p>
  
  <p>I can't ask my users to use this functionality only for short formulas.</p>
  
  <p><em>Exemple of incorrect output :</em> </p>
  
  <p><a href="https://i.stack.imgur.com/z2s4c.png" rel="noreferrer"><img src="https://i.stack.imgur.com/z2s4c.png" alt="enter image description here"></a></p>
  
  <p><em>What I did based on the documentation (but does not work) :</em></p>
  
  <pre><code>MathJax.Hub.Config({
      tex2jax: {
           inlineMath: [['$','$'], ['\\(','\\)']]
      },
      "HTML-CSS": { 
           linebreaks: { automatic: true }
      },
      SVG: { 
           linebreaks: { automatic: true } 
      }
  });
  </code></pre>
  
  <p>Full code on JS Fiddle : <a href="https://jsfiddle.net/ao8cnquw/" rel="noreferrer">https://jsfiddle.net/ao8cnquw/</a></p>