CSS 溢出处理

调节 overflow、overflow-x、overflow-y 以及 text-overflow、white-space 的取值,实时预览内容超出容器时的表现,并一键复制对应的 CSS 代码,全部在浏览器本地完成。

参数设置 可实时预览

text-overflow 仅在 overflow 不为 visible 且 white-space 为 nowrap 时才能对单行文本生效。

实时预览

这是一行刻意写得非常长的文本,用来演示当内容宽度超出容器时,overflow 与 text-overflow 会如何裁剪或以省略号收尾。

第二段同样很长,目的是让容器在垂直方向上也可能出现溢出,从而观察 overflow-y 的表现。

第三段继续补充内容,方便在 scroll 与 auto 之间对比滚动条的出现时机。

预览容器宽度固定、高度受限,便于观察裁剪与滚动行为。

生成的 CSS
overflow 简写auto hidden
text-overflowellipsis
white-spacenowrap
可能滚动是

          

复制后可直接粘贴到样式表中,选择器默认为 .box。

使用规则
  • 当一个轴的 overflow 为 visible、另一个轴不是时,visible 会被计算为 auto。
  • 设置了 overflow 为 hidden、scroll 或 auto 后,元素会成为可滚动容器,影响内部绝对定位的参照。
  • text-overflow: ellipsis 需要配合 overflow: hidden 与 white-space: nowrap 才能对单行文本生效。
  • 多行文本的省略号通常需要 -webkit-line-clamp 等额外方案。
  • 裁剪内容不会改变盒子的实际尺寸,只是不再绘制超出部分。