I have implemented additional processing for MathJax using the following code snippet:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] },
"HTML-CSS": {
linebreaks: { width: "container" }
}
});
</script>
My assumption was that it should work with word wrap containers defined in my HTML code.
Here is the CSS code I have set with word-wrap:
.col {
background: #f0f0f0;
width: 230px;
padding: 10px;
font-size: 1.5em;
word-wrap: break-word;
}
This is the content within my body:
<body>
<div class = 'col'>
$$
Pr [( G \bigcup B \bigcup S)^e ] = 1 - Pr ( G \bigcup B \bigcup S)
= 1 - [Pr(G)+Pr(B)Pr(S)-Pr(G \bigcap B) - Pr(G \bigcap S) - Pr(B \bigcap S)]
Pr [( G \bigcup B \bigcup S)^e ] = 1 - Pr ( G \bigcup B \bigcup S)
= 1 - [Pr(G)+Pr(B)Pr(S)-Pr(G \bigcap B) - Pr(G \bigcap S) - Pr(B \bigcap S)]
= 1 - (0.28 + 0.29 + 0.19 - 0.14 - 0.10 -0.12 + 0.08) = 1 - 0.48 = 0.52
$$
</div>
</body>
However, the word wrap functionality is not working in my case.
I have attached a screenshot showing how it appears in Safari on iPad.
The words should wrap to the second line, but as you can see, they do not.