如果等式不适合宽度，如何换行？

Question

我有一个 MathML 脚本，它显示了一个方程式及其用法，我希望在其中最大宽度为 600 PX。

<span style="color: red;max-width: 600px;">
    <math>
    <mn>2</mn>
    <mfenced>
    <mrow><mi>l</mi><mi>b</mi><mo>+</mo><mi>b</mi><mi>h</mi><mo>+</mo><mi>h</mi><mi>l</mi></mrow>
    </mfenced>
    <mo>=</mo>
    <mn>2</mn><mo mathvariant="sans-serif">x</mo><mfenced>
    <mrow><mn>26</mn><mtext>cm</mtext><mo mathvariant="sans-serif">x</mo><mn>32</mn><mtext>cm</mtext><mo>+</mo><mn>28</mn><mtext>cm</mtext><mo mathvariant="sans-serif">x</mo><mn>58</mn><mtext>cm</mtext><mo>+</mo><mn>69</mn><mtext>cm</mtext><mo mathvariant="sans-serif">x</mo><mn>98</mn><mtext>cm</mtext></mrow>
    </mfenced>
    </math>
</span>

如果它不适合 600PX，我不想将行从“=”符号换成新行。 并且还需要右侧的那块碎片 谢谢

Answer 1

你可以使用

<mo linebreak="goodbreak" indentalign="right">=</mo>

使等号成为首选断点，第二行右对齐。但是这是否有效取决于您使用的 MathML 渲染器的功能（并非所有渲染器都实现了 MathML3 的换行功能）。它应该适用于 MathJax，但不适用于 Firefox 的原生 MathML 渲染。

但是请注意，公式缩进仅适用于块级数学；即，您需要使用 <math display="block"> 才能进行右对齐。

还要注意max-width 仅适用于块级元素，因此它不会影响<span>。您需要改用 <div> 之类的东西。

您还应该为“times”使用正确的符号，而不是“x”。例如，

<mo>&#xD7;</mo>

应该这样做。这将获得正确的间距以及为乘法提供正确的语义。

Answer 2

对于内联元素，max-width 属性将被忽略。您需要在span 元素上设置display: block（或者，更合乎逻辑地，使用div 或p 而不是span）来强制设置最大宽度。

如果您希望仅在等号后允许换行，则需要额外的标记。然后，您可以在不允许中断的任何元素上设置white-space: nowrap。或者，如果后面没有其他字符允许换行，您可以使用不间断空格。

如果您使用 MathML，我认为您还应该正确使用数学符号；具体来说，字母“x”不是乘法符号，正确的符号“×”和“⋅”需要在它们周围加空格。这与主题相关，因为当您使用空格时，您需要考虑它们是破坏性的还是非破坏性的。