Skip to content

overflow: hidden 不生效,文字覆盖到 padding 上问题解决

Published: at 09:06 AMSuggest Changes

Mark 一下

overview: hidden 不生效,文字覆盖到 padding 上

官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

<div
  style="
    max-height: 100vh;
    width: 400px;
    padding: 20px;
    overflow: hidden;
    position: fixed;
"
>
  <div
    style="
    height: 100%;
    overflow: hidden;
"
  >
    <div>
      内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊内容超级长啊
    </div>
  </div>
</div>

解决方法,内容套上一层 div,设置 display: flex; 然后设置 overflow: hidden; 即可。

https://bpmn.io/toolkit/bpmn-js/ https://anseki.github.io/leader-line https://reactflow.dev https://vueflow.dev


Previous Post
流程图开源 JS 库推荐
Next Post
Tailwind CSS Animate 动画库