数学公式长度溢出

Posted on Edited on In , , , Word count in article: 113 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
15
16
17
18
19
...
p {
  ...
  overflow-x: auto;
  ...
}
...
ul, ol{
  overflow-x: auto;
}

...

blockquote {
  ...
  overflow-x: auto;
  ...
}

  • 此处是 header/footer 与 post-footer 的 overflow 设置
/themes/next/source/css/_common/outline/header/index.styl
1
2
3
4
5
.site-brand-container {
  ...
  overflow-x: auto;
  ...
}
/themes/next/source/css/_common/outline/footer/index.styl
1
2
3
4
5
.footer {
  ...
  overflow-x: auto;
  ...
}
/themes/next/source/css/_common/outline/post/post-footer.styl
1
2
3
4
5
.post-footer {
  ...
  overflow-x: auto;
  ...
}