极客观点
项目管理
HarmonyOS
在一个设置了padding的div里设置oveflow:hidden之后，内容超出了div之后，超出的内容会在padding里面显示。。。我想要做的是超出之后超出的内容会被限制在padding之内
如何让overflow限制padding之内显示
阅读 17.2k
如果是文字内容的话，暂时只能在父容器内在嵌套一个容器并在容器上 overflow:hidden 。
如果是背景图片的话，可以在父容器添加样式 background-clip:content-box 。
新手上路，请多包涵
我想到的一个解决办法是加上一个中间层，因为padding是算盒子内容的，所以加上一个中间层，把中间层宽高撑满父容器，然后中间层设置溢出隐藏overflow:hidden就行了
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.center {
display: flex;
align-items: center;
justify-content: center;
}
.outer {
padding: 40px;
width: 200px;
height: 200px;
background-color: yellow;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
background-color: red;
animation: move linear 3s infinite;
}
@keyframes move {
from {
transform: translateX(150%);
}
to {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="outer center">
<div class="wrapper center">
<div class="inner"></div>
</div>
</div>
</body>
</html>
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？
参考使用：antd的Tag我做了2行的Tag： {代码...} 现在的需求是，如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？3 回答1k 阅读✓ 已解决
如何实现类似豆包的AI改写框跟随内容滚动效果？
豆包这种是怎么实现的，ai改写这个框是跟随内容滚动的，但是ai改写这个框是在body下与根节点平级的，想了半天，看他页面上代码也看不出来，求助4 回答1.3k 阅读✓ 已解决
body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？
:first-child 选中了什么如题，在学习:first-child伪类的时候，我使用如下语法，但是产生的结果在预料之外。codepen链接html {代码...} css {代码...} 按照:first-child语法，body :first-child选中的应该是body的第一个子元素，也就是 {代码...} 结果选中了这个元素 {代码...} 网上搜索无果，所以来这里提问了，body :f...2 回答950 阅读✓ 已解决
问一个鼠标滚动事件，这种是怎么实现的？
我看到了deepseek官网的这个按钮，鼠标放上去，还是可以滚动页面，这个是怎么做的？我研究了一下deepseek官网的支持，而通义千问的却不可以。2 回答1.5k 阅读✓ 已解决
如何在CSS中实现滚动条不溢出圆角框？
请问css如何实现滚动条在外侧滚动框的下一层？我最近在设计一个小插件，里面有一个换肤的小弹窗，小弹窗里还有一个小框，在这个小框里加了滚动条，小框为了美化做了border-radius，然后为这个框自定义了::webkit-scrollbar伪类，但是我发现这个滚动条会溢出这个框，很不好看，下图为现在的效果：我想做到上下的滚动条可...2 回答1.4k 阅读✓ 已解决
form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？
{代码...} {代码...} 这种基于name直接读取dom元素的写法，兼容性如何？有无标准说明？2 回答922 阅读✓ 已解决
请问，是否可以设定Table的宽度，或者不让其超过父容器呢？
我写了一个可编辑Cell的List： {代码...} 使用方式： {代码...} 现在的问题是，比如：内容过长会直接冲出父容器：请问，是否可以设定Table的宽度，或者不让其超过父容器呢？2 回答1.1k 阅读✓ 已解决
overflow: hidden; 可以使子元素溢出父元素外后隐藏。
padding 是内边距，是元素的一部分，所以溢出到 padding 里不属于溢出父元素，overflow 就不会使之隐藏。