📦 CSS溢出属性生成器

广告位 - 顶部 (728×90)

免费在线CSS溢出(overflow)属性生成器。可视化调整overflow-x、overflow-y及overflow-behavior属性,实时预览滚动、隐藏、可见等效果。支持所有overflow属性值组合。适合前端开发者调试和生成容器溢出控制代码。纯前端处理。

100px300px600px
50px150px400px
容器范围

这是一个演示溢出效果的容器。

当内容超出容器尺寸时,overflow属性决定如何处理。

水平的蓝色文本展示了X轴溢出效果:

→ 这是一段很长的水平文本内容,用来测试overflow-x在水平方向上的裁剪和滚动效果。当容器宽度不足以显示全部内容时,overflow-x的设置决定了这部分内容的呈现方式。

↓ 垂直方向的内容也超出了容器,overflow-y控制垂直滚动或裁剪。

再添加一些内容确保垂直方向也超出容器高度,方便你测试overflow-y的效果。

调整上面的选项,观察溢出行为的变化!

注意:当overflow使用visible值时,内容会溢出显示在容器外部。

广告位 - 中部 (728×90)

常见问题

overflow属性的各个值有什么区别?

visible(默认):内容不会被裁剪,超出容器会显示在外部。hidden:超出部分被裁剪隐藏。scroll:始终显示滚动条(无论内容是否超出)。auto:仅在需要时显示滚动条。clip:类似hidden,但禁止程序化滚动,支持overflow-clip-margin属性。

overflow-x和overflow-y可以设置不同的值吗?

可以。但需要注意,如果一个方向设置为visible,另一个方向设置为auto/scroll/hidden,visible会被强制改为auto。本工具会自动处理这种CSS规范限制,确保生成有效的代码。

overflow-behavior属性有什么作用?

overflow-behavior(CSS overscroll-behavior)控制浏览器到达滚动边界时的行为。auto(默认值):浏览器的默认滚动边界行为。contain:阻止滚动链传播到父元素。none:不仅阻止传播,还阻止默认的滚动到边界效果(如Chrome的下拉刷新)。