MathJax 3：内联数学和 overflow-x

Question

处理重叠显示数学非常容易。

我们可以向所有显示数学元素添加一个名为 has-jax 的 class...

window.addEventListener('load', (event) => {
  document.querySelectorAll('mjx-container[jax="CHTML"][display="true"]').forEach(function(x){
      x.parentElement.classList.add('has-jax');
  });
});

然后在我们的css文件中定义

.has-jax {
  overflow-x: auto;
  overflow-y: hidden;
}

但是有没有办法将 overflow-x: auto 添加到内联数学中？

问题是 overflow-x 只能发生在 block 或 inline-block 级元素上，因为元素需要有宽度才能溢出。

编辑

以下解决方案导致 Linux Mint 上的 Firefox 浏览器中的内联数学对齐错误：

如果我从下面的解决方案中删除 display:inline-block，则 x+x+y 对齐良好，但内联数学会溢出框。

Answer 1

您不需要使用 .has-jax，但可以按如下方式设置 mix-container 本身的样式：

mjx-container {
  display: inline-grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

<div style="width:15em; border: 1px solid; padding: 3px 5px">
This is some text with a long in-line math expression
\(a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\)
that we hope will have a scroll bar!  This math \(x+y+z\) should not.
Long display math also gets a scroll bar:
\[a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\]
</div>

如果滚动条太长，这还将提供带有滚动条的显示模式数学。如果你只想进行内联数学运算，请改用mjx-container:not([display])。

这是结果的屏幕截图：

MathJax 3：内联数学和 overflow-x

MathJax 3: Inline Math and overflow-x

mathjax

responsive