flutter_tex包TeXViewDocument文本无端换行问题解决方案咨询

1. 调整MathJax换行配置 #

MathJax默认的自动换行规则可能会导致不必要的换行，你可以通过配置关闭该逻辑，仅在容器边界不足时换行。在加载MathJax的脚本前添加如下配置：

MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    linebreaks: { automatic: false }
  }
};

2. 修正容器CSS样式 #

检查承载MathJax内容的容器是否存在强制换行或宽度不足的问题，添加以下样式调整：

.math-content {
  width: 100%; /* 或设置合适的固定宽度，比如700px */
  overflow-x: auto; /* 内容过长时允许横向滚动 */
}
/* 针对行内公式，避免影响正常文本流 */
.math-content .mjx-chtml {
  white-space: normal !important;
}
/* 针对块级公式，强制不自动换行 */
.math-content .mjx-display {
  white-space: nowrap !important;
}

3. 校准MathJax缩放比例 #

默认缩放比例可能导致公式宽度计算偏差，手动设置缩放值确保尺寸正确：

MathJax = {
  svg: {
    scale: 1.0 /* 根据实际显示效果微调 */
  }
};

4. 排查父容器宽度限制 #

检查嵌套的父容器是否设置了过小的max-width或width属性，以及overflow: hidden这类会挤压内容的样式，移除或调整这些限制，给MathJax足够的展示空间。

5. 针对特定公式禁用换行 #

对不需要换行的公式块，添加自定义类并配合CSS强制禁止换行：

<div class="no-wrap-math">
  $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$
</div>

.no-wrap-math .mjx-chtml {
  white-space: nowrap !important;
}

内容的提问来源于stack exchange，提问作者Jeon Hankoo