如何修复我的乳胶数学术语的宽度和高度？答案

【问题标题】：How do I fix the width and height of my latex math term?如何修复我的乳胶数学术语的宽度和高度？
【发布时间】：2021-03-27 18:54:26
【问题描述】：

如何固定我的乳胶数学术语的宽度和高度？

我目前正在编写一个交互式网络函数，我可以在其中单击乳胶数学术语，它将取消为零。然而，现在，它有点跳动/小故障，因为一旦用户点击它，第一个数学项的大小就会发生变化（如图所示以橙色突出显示）。

有没有办法可以在点击前后将橙色框的宽度和高度设置为恒定宽度？

<p>
<span class="special">Mass Continuity Equation:</span> 
<span class="first" id="first" data-click-state="1">\({{\partial \rho} \over {\partial t}}\)</span>
<span id="second">\(+\)</span> 
<span id="third" data-click-state="1">\({{\partial u} \over {\partial x}}\)</span> 
<span id="symbol"> \(+\) </span> 
<span id="fourth" data-click-state="1"> \({{\partial v} \over {\partial y}}\)</span> 
<span id="fifth">\(+\)</span> 
<span id="sixth" data-click-state="1"> \({{\partial w} \over {\partial z}}\) </span>
<span id="seventh">\(= 0\)</span> 
</p>

用户点击第一个词后，会呈现：

<p>
<span class="special">Mass Continuity Equation:</span> 
<span class="first" id="first" data-click-state="0">\(\require{cancel}\cancelto{0} {{\partial \rho} \over {\partial t}}\)</span>
<span id="second">\(+\)</span> 
<span id="third" data-click-state="1">\({{\partial u} \over {\partial x}}\)</span> 
<span id="symbol"> \(+\) </span> 
<span id="fourth" data-click-state="1"> \({{\partial v} \over {\partial y}}\)</span> 
<span id="fifth">\(+\)</span> 
<span id="sixth" data-click-state="1"> \({{\partial w} \over {\partial z}}\) </span>
<span id="seventh">\(= 0\)</span> 
</p>

CSS 代码：

p { font-size: 30px;}

代码笔：

CODEPEN LINK

【问题讨论】：

如果您的0 位于absolute 或floating，则框的大小将保持不变。您介意提供一个有效的codepen 或snippet吗？
这是我的 codepen 链接：codepen.io/harisdanial97/pen/xxEdWaW 我不太清楚你将我的 0 定位为绝对值还是浮点数是什么意思？ @DavidYKHan
对不起。我对乳胶数学一无所知。当您单击它时，您的span 大小会发生变化。尝试用divs 包装那些spans 和display: inline-flex;。在您的 spans 周围添加边距/填充将解决您的问题。
如果我添加边距/填充，新生成的术语也会有这些填充和边距。它不会使新旧术语具有相同大小的“橙色框”。

标签： html css mathjax

【解决方案1】：

您可以使用\phantom{} 来创建一个与取消的表达式大小相同的空间，并使用\llap{} 将未取消的表达式放在其顶部，如

\require{cancel}
\phantom{\cancelto{0}{\partial\rho \over \partial t}}
\llap{{\partial\rho \over \partial t}\kern .7em}

（\kern .7em是为了将导数正确放置在取消项的空间内，并通过实验确定。）

请注意，您可以使用 action 扩展来处理未取消和取消版本之间的切换，因此您真的不需要 javascript 来完成这个特定示例。

这是一个使用\toggle 操作在未取消和已取消版本之间切换的示例：

<script src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML"></script>

$$
\require{cancel}\require{action}
\def\dd#1#2{{\partial#1 \over \partial#2}}
\def\Cdd#1#2{\cancelto{0}{\dd{#1}{#2}}}
\def\Tdd#1#2{
  \toggle
    {\phantom{\Cdd{#1}{#2}}\llap{\dd{#1}{#2}\kern.6em}}
    {\color{red}{\Cdd{#1}{#2}}}
  \endtoggle
}
\Tdd \rho t + \; \Tdd u x + \; \Tdd v y + \; \Tdd w z
$$

【讨论】：