如鱼饮水
·
让过长的 KaTeX 公式支持横向滚动
💡
原文中文，约900字，阅读约需3分钟。
📝
内容提要
在博客中使用KaTeX渲染长数学公式时，可能会超出边界，影响移动端显示。为解决此问题，可以让KaTeX支持横向滚动，并添加样式配置以补偿边距，隐藏滚动条以改善手机显示。
🎯
关键要点
- 在博客中使用KaTeX渲染数学公式时，长公式可能超出边界，影响移动端显示。
- 手动换行不是理想解决方案，因为不同手机支持的最大宽度不同，且某些公式不便换行。
- 最终解决方案是让KaTeX支持横向滚动，避免影响整个页面宽度。
- 在source/_data/styles.styl中添加配置以支持横向滚动。
- 添加额外的边距补偿以解决公式在不同缩放比例下显示不完整的问题。
- 可以通过CSS隐藏手机上显示的滚动条，以改善视觉效果。
❓
延伸问答
如何解决KaTeX公式在移动端超出边界的问题？
可以让KaTeX支持横向滚动，避免影响整个页面宽度。
手动换行是否是解决长公式显示问题的好方法？
手动换行不是理想解决方案，因为不同手机支持的最大宽度不同，且某些公式不便换行。
在KaTeX中如何添加样式配置以支持横向滚动？
在source/_data/styles.styl中添加配置：.katex-display { overflow : auto hidden }。
如何解决KaTeX公式在不同缩放比例下显示不完整的问题？
可以通过添加额外的边距补偿来解决，例如：.katex-display { padding : 1px 0 ; }。
如何在手机上隐藏KaTeX公式的滚动条？
可以使用CSS隐藏滚动条，例如：.katex-display { scrollbar-width : none; }。
KaTeX公式在不同设备上的显示效果有什么区别？
在电脑上显示正常，但在移动端可能会超出边界，影响页面显示。
➡️
