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
当前分类随机文章推荐
- CSS - 使图片居中显示的方式总结 阅读92次,点赞0次
- CSS - 使用Katex渲染数学公式,数学公式过长超出页面范围的问题修正 阅读64次,点赞0次
全站随机文章推荐
- 多进程之间常用的通信方式 阅读396次,点赞0次
- 资源分享 - Non-Photorealistic Rendering 英文高清PDF下载 阅读1911次,点赞0次
- C++ – 字节数组byte[]或者unsigned char[]与float的相互转换 阅读2907次,点赞0次
- Pytorch - torch.stack参数详解与使用 阅读1175次,点赞0次
- Duilib - Duilib的绘制机制和绘制流程 阅读727次,点赞1次
- 资源分享 - Practical Linear Algebra - A Geometry Toolbox , Third Edition 英文高清PDF下载 阅读1412次,点赞0次
- C++11/std::thread - 线程管理join/detach 阅读2643次,点赞0次
- C++ - std::numeric_limits
简介与使用,用于获取指定数据类型的最大值与最小值 阅读995次,点赞0次 - 资源分享 - Physics for Game Developers(First Edition) 英文高清PDF下载 阅读2300次,点赞0次
- 资源分享 - Real-Time Rendering, Fourth Edition 英文高清PDF下载 阅读55502次,点赞21次
评论
169