responsive - MathJax 3：内联数学和溢出-x

Question

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

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

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 对齐良好，但内联数学溢出了框。

标签： responsivemathjax

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])改用。

这是结果的屏幕快照：