数学公式长度溢出

Posted on Edited on In , , , Word count in article: 208 Reading time ≈ 1 mins.
  • 移动端页面公式长度过长，超过了 post 的 box，使页面不充分填充屏幕
  • 问题解决 √

问题起因

手机上有长数学公式的时候遇到了元素溢出(overflow)问题

问题原因

简单排查是 SSR 生成的 svg 公式不能 scroll，挤出 box

问题解决

简单的修改 CSS 即可

  • 此处是文章的 overflow 设置
/themes/next/source/css/_common/scaffolding/base.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
p {
  ...
  overflow-x: auto;
  overflow-y: hidden; 
  ...
}
...
ul, ol{
  overflow-x: auto;
  overflow-y: hidden; 
}
...

  • 此处是 header/footer 与 post-footer 的 overflow 设置
/themes/next/source/css/_common/outline/header/index.styl
1
2
3
4
5
6
.site-brand-container {
  ...
  overflow-x: auto;
  overflow-y: hidden; 
  ...
}
/themes/next/source/css/_common/outline/footer/index.styl
1
2
3
4
5
6
.footer {
  ...
  overflow-x: auto;
  overflow-y: hidden; 
  ...
}
/themes/next/source/css/_common/outline/post/post-footer.styl
1
2
3
4
5
6
.post-footer {
  ...
  overflow-x: auto;
  overflow-y: hidden; 
  ...
}
/themes/my-next/source/css/_common/components/third-party/search.styl
1
2
3
4
5
6
7
8
.search-result-container {
  ...
  overflow: auto;
  ...
  ul,ol{
    overflow: unset;
  }
}