我在 MathJax 文档中读到自动换行
are only computed once when the equation is initially typeset, and do not change if the user changes the window size
如何在每次窗口大小更改时动态计算它们？
例如我有以下代码:
<!DOCTYPE html>
<html>
<head>
<title>MathJax auto line-breaking</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } }
});
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
<style>
#site-content {
width: 70%;
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="site-content">
<p>Some cool text about math</p>
\begin{equation}
f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1})
\end{equation}
<p>More cool text</p>
\begin{equation}
f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1})
\end{equation}
<p>More cool text</p>
\begin{equation}
f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1})
\end{equation}
<p>...</p>
</div>
</body>
</html>
如果我以全宽加载此页面然后调整窗口大小会发生什么:
如果可以的话，我想动态添加换行符:
最佳答案
Peter Krautzberger 的回答很好，但我想改进一下。所以，请先阅读他的回答，然后再继续。
监听resize的问题
Peter 的回答中的问题是 resize 每次 浏览器窗口的大小发生变化时都会触发。所以，如果开始改变窗口的大小，每次改变，都会触发该事件。最终结果是，当用户调整窗口大小时，您的重新渲染调用将多次出现问题，从而导致闪烁的烦人效果。
解决方案
您需要通过使用超时来避免这种副作用，并且仅在用户完成调整窗口大小时才执行操作，而不是在他处于窗口中间时:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"SVG": {linebreaks: { automatic: true }}
});
window.addEventListener('resize', MJrerender);
let t = -1;
let delay = 1000;
function MJrerender() {
if (t >= 0) {
// If we are still waiting, then the user is still resizing =>
// postpone the action further!
window.clearTimeout(t);
}
t = window.setTimeout(function() {
MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
t = -1; // Reset the handle
}, delay);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_SVG-full"></script>
<h1> Line-breaking should happen on window resize</h1>
$$a_1 + a_2 + a_3 + a_4 + a_5 + a_6 + a_7 + a_8 + a_9 + a_{10} + a_{11} + a_{12} + a_{13} + a_{14} + a_{15} + a_{16} + a_{17} + a_{18} + a_{19} + a_{20}$$这样体验会更流畅:)
关于html - Mathjax 调整大小时自动换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40628064/