如何让MathJax渲染的LaTeX公式适配<span>标签边界？

问题：通过编程方式创建HTML标签，使用MathJax展示LaTeX公式时，公式在<span>标签尺寸计算完成后才渲染，导致公式超出span边界。

现有代码 #

script.js #

formula = "${{{{{{x^2}^2}^2}^2}^2}^2}^2$"
question_div = document.createElement("div");
question_div.setAttribute("id", "q1");

let input = document.createElement("input");
input.name = "a1";
input.id = "a1";
input.type = "radio";
let label = document.createElement("label");
let span_label = document.createElement("span");
span_label.setAttribute("class", "my-span");

span_label.innerText = formula;

label.appendChild(input);
label.appendChild(span_label);

question_div.appendChild(label);
document.body.appendChild(question_div);

index.html #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

styles.css #

label {
  border: 1px solid rgb(199, 199, 199);
  margin: 5px;
  padding: 4px;
  cursor: pointer;
}

div{
  padding-top:8px;
  padding-bottom:8px;
}

.my-span{
  padding-left:8px;
}

修复方法 #

问题核心是MathJax异步渲染，DOM元素尺寸在公式渲染前就已确定，导致渲染后公式撑破容器。以下是几种实用修复方案：

方案1：手动调用MathJax渲染并触发容器重排 #

动态添加DOM后，调用MathJax的API手动渲染目标元素，渲染完成后强制浏览器重新计算容器尺寸：
修改script.js末尾代码：

document.body.appendChild(question_div);

// 触发MathJax渲染指定span，并在完成后强制重排
MathJax.typesetPromise([span_label]).then(() => {
  // 用临时隐藏再显示的方式触发浏览器重绘
  label.style.display = 'none';
  void label.offsetHeight; // 强制浏览器计算尺寸
  label.style.display = '';
});

方案2：给容器设置自适应样式 #

通过CSS让容器能根据渲染后的公式自动调整宽度：
修改styles.css中的.my-span：

.my-span{
  padding-left:8px;
  display: inline-block; /* 让span随内容自动调整宽度 */
}

或者给外层label添加自适应属性：

label {
  border: 1px solid rgb(199, 199, 199);
  margin: 5px;
  padding: 4px;
  cursor: pointer;
  display: inline-block; /* 让label自适应内容宽度 */
}

方案3：调整脚本加载时机 #

让动态创建DOM的脚本在MathJax完全加载就绪后再执行，确保公式能及时渲染：
修改index.html中的脚本加载部分：

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
<script>
// 等待MathJax初始化完成后再加载script.js
MathJax.startup.promise.then(() => {
  const script = document.createElement('script');
  script.src = 'script.js';
  document.body.appendChild(script);
});
</script>

内容的提问来源于stack exchange，提问作者M. Al Jumaily