CSS – 使用Katex渲染数学公式，数学公式过长超出页面范围的问题修正
1 Katex
Katex是一个在web端渲染tex的快速和易于使用的js库，KaTeX 与所有主流浏览器兼容，包括 Chrome、Safari、Firefox、Opera、Edge 和 IE 11。
Katex的Github地址为：https://github.com/KaTeX/KaTeX，官网为：https://katex.org/。
1.1 Katex显示超长数学公式的问题
在本站上也是使用Katex渲染数学公式，在使用的过程中发现如果一个数学公式很长，在PC或者移动设备上都会出现超出文章页面显示的问题。
比如
1.2 问题修正
对于修正这个问题很简单，通过修改katex的css文件即可，在css文件末尾加入以下语句
.katex-display{
min-height: 100%;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.katex{
font:normal 1.05em KaTeX_Main,Times New Roman,serif;
}
上述css将katex公式的字体从原有的1.2em修改为1.05em，然后设置宽度为100%，超出屏幕的部分进行隐藏。
参考
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：CSS – 使用Katex渲染数学公式，数学公式过长超出页面范围的问题修正
原文链接：https://www.stubbornhuang.com/2783/
发布于：2023年09月04日 10:59:44
修改于：2023年09月04日 11:11:39
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
文章末尾
评论
72