Html MathJax单词包装_Html_Ios_Css_Mathjax

Html MathJax单词包装

html ios css

Html MathJax单词包装,html,ios,css,mathjax,Html,Ios,Css,Mathjax,我已经用下面的代码为MathJax配置了额外的处理 <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\$","\$"]] }, "HTML-CSS": { linebreaks: { width: "container" } } });

我已经用下面的代码为MathJax配置了额外的处理

<script type="text/x-mathjax-config">

    MathJax.Hub.Config({
    tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] },
    "HTML-CSS": {
       linebreaks: { width: "container" }          
    }              
    });

</script>

这是我的身体：

<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>


$$
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
$$

但在我的情况下，word wrap不起作用

我附上了iPad上Safri的屏幕截图

这些单词必须换行到第二行，但它们不在您可以看到的范围内。

编辑如果你在iOS6上，那么你可能会遇到

MathJax使用自己的换行算法（）。设置

换行：断开单词将不会更改其行为
除非缺少一些信息，否则您的代码对我来说就像预期的那样工作，即MathJax进行换行
这里有一个完整的例子
<!doctype HTML>
<head>
<title>Break!</title>
<script type="text/x-mathjax-config">

MathJax.Hub.Config({
tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] },
"HTML-CSS": {
  linebreaks: { automatic: true, width: "container" }          
}              
});

</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<style>
.col {
    background: #f0f0f0; 
    width: 230px; 
    padding: 10px; 
    font-size: 1.5em; 
    word-wrap: break-word; 
}  
</style>

</head>
<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>


打破
MathJax.Hub.Config({
tex2jax:{inlineMath:[[“$”，“$”]，[“\\（“，“\\）”]}，
“HTML-CSS”：{
换行符：{automatic:true，宽度：“container”}
}              
});
上校{
背景：#f0；
宽度：230px；
填充：10px；
字号：1.5em；
单词包装：打断单词；
}  
$$
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
$$
我也面临类似的问题，但我无法用wrap这个词来解决。

这个问题是由MathJax的默认类引起的，因此我们需要重写它们，以便它根据父类的宽度工作：
.mjx-chtml {
   font-size: ${IS_MOBILE ? '100%' : '120%'} !important;
}
.mjx-table {
   white-space: pre-line !important;
}
.mjx-table .mjx-char {
   white-space: ${IS_MOBILE ? 'pre-line' : 'inherit'} !important;
}
.mjx-full-width {
   width: 0em !important;
}

感谢您的回复，但不幸的是，我不知道我必须设置哪些选项。你能解释一下它是怎么工作的吗。如何设置将显示数学表达式的容器的宽度。您是否在脚本调用之前放置了配置块？是的，但如果您计划将其加载到iPad应用程序中，则需要删除不使用的组件，以便使其更小。有关详细信息，请参阅。另外，在这种情况下，您不需要使用组合配置文件，因为在不涉及网络的情况下，使用您自己的自定义配置同样快。因此我怀疑您的设置有问题。渲染时间不应过长。我想知道您是否删除了不应该删除的内容，MathJax正在尝试加载它并超时（等待加载文件时有15秒超时）。您可能希望将MathJax.Hub.Queue（function（）{alert（MathJax.Message.Log（））}）添加到您的配置中，并查看是否存在任何“加载失败”错误消息。我已更新了答案，因为cdn.MathJax.org已接近其使用寿命，请参阅。
.mjx-chtml {
   font-size: ${IS_MOBILE ? '100%' : '120%'} !important;
}
.mjx-table {
   white-space: pre-line !important;
}
.mjx-table .mjx-char {
   white-space: ${IS_MOBILE ? 'pre-line' : 'inherit'} !important;
}
.mjx-full-width {
   width: 0em !important;
}