如何让Svelte中KaTeX长公式在限定容器内自动换行？

要让KaTeX生成的长公式在限定宽度容器内自动换行，需要同时调整KaTeX的渲染配置和CSS样式，具体步骤如下：

1. 修改KaTeX渲染配置，开启自动换行支持 #

KaTeX默认禁止自动换行，需要在renderToString的配置中显式开启allowBreak: true。如果使用显示模式（displayMode: true），还需关闭严格模式（strict: false），因为严格模式会限制自动换行行为。

修改后的Svelte组件脚本：

<script lang="ts">
  import katex from "katex"
  interface Props {
    expr: string
    displayMode: boolean
  }
  const { expr, displayMode }: Props = $props()
  const r = $derived(katex.renderToString(expr, { 
    displayMode,
    allowBreak: true,
    strict: !displayMode // 显示模式下关闭严格模式以允许换行
  }))
</script>

2. 添加CSS样式覆盖KaTeX默认布局 #

KaTeX生成的元素默认使用white-space: nowrap强制不换行，需要通过CSS覆盖这个规则，同时确保容器支持换行：

<style>
  /* 让KaTeX元素支持自动换行 */
  .katex {
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  /* 针对显示模式的公式，添加横向滚动兜底 */
  .katex-display {
    max-width: 100%;
    overflow-x: auto;
  }
</style>

<span>
  {@html r}
</span>

3. 确保父容器的宽度约束生效 #

父容器的max-width: 800px需要是块级元素，避免inline元素导致宽度约束失效：

/* 父容器样式（可放在全局样式或组件父级） */
.formula-container {
  max-width: 800px;
  width: 100%;
  /* 可选：添加内边距避免公式贴边 */
  padding: 0 1rem;
}

手动强制换行（可选） #

如果某些复杂公式无法自动拆分，可以在表达式中插入\\allowbreak命令，指定强制换行位置：

// 示例表达式
const longExpr = "x_1 + x_2 + x_3 + \\allowbreak x_4 + x_5 + x_6 + x_7 + x_8"

内容的提问来源于stack exchange，提问作者Fabian Stiewe