10.CSS溢出 overflow

CSS 布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

描述

visible

默认值。内容不会被修剪,会呈现在元素框之外。

hidden

内容会被修剪,并且其余内容是不可见的。

scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

overflow: visible

默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:

这里的文本内容会溢出元素框。

这里的文本内容会溢出元素框。

这里的文本内容会溢出元素框。

这里的文本内容会溢出元素框。

这里的文本内容会溢出元素框。

这里的文本内容会溢出元素框。

这里的文本内容会溢出元素框。

...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当设置元素的CSS属性`overflow: hidden;`失效时,可能有以下几个原因。 1. 父元素没有设定高度或宽度:`overflow`属性只对有限定高度或宽度的容器元素生效。如果父元素没有明确设置高度或宽度,那么`overflow: hidden;`将失效。在这种情况下,可以尝试给父元素设置合适的高度或宽度。 2. 元素的`position`属性为`static`:只有设置了非`static`的`position`属性,如`relative`、`absolute`或`fixed`,`overflow`属性才会生效。如果元素的`position`属性为`static`,可以尝试将其改为其他值。 3. 元素的内容超出了容器的边界:如果元素的内容超出了容器的边界,即使设置了`overflow: hidden;`,内容仍然会溢出。这种情况下可以尝试调整元素内容或容器的大小,或者使用其他适合的布局方式。 4. 元素被其他元素遮挡:如果设置了`overflow: hidden;`的元素被其他元素遮挡,那么它的效果可能无法正常显示。这种情况下,可以尝试调整元素的层级或位置,以便让它在其他元素之上。 5. 元素的`overflow`属性被其他CSS规则覆盖:如果其他CSS规则中有更具体的选择器,并设置了与`overflow`属性相关的样式,那么`overflow: hidden;`可能会被覆盖。在这种情况下,可以检查其他样式规则,并适当调整或移除冲突的规则。 总之,当`overflow: hidden;`失效时,需要检查父元素的尺寸、元素的`position`属性、元素内容是否溢出、元素是否被其他元素遮挡以及是否有其他CSS规则覆盖等情况,以找到并解决失效的原因。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值