← 返回 Web 词条

内容裁剪

Web原生支持

在 Web 上叫overflow

CSS: overflow

官方定义是「设置内容装不下元素内边距盒时的期望行为」。这里有个与另两端的结构性差别:Web 把裁剪与滚动放在同一个属性里,靠取值区分(hidden / clip 是切掉,scroll / auto 是给滚动条)。iOS 和 Android 则是两件独立的事。所以「内容裁剪」在 Web 上对应的是这个属性的一部分取值,不是整个属性。

内容超出容器范围时,把露在外面的部分切掉不显示。

  • 超出去的切掉
  • 别让内容跑出框
  • 圆角外面露出来了
  • 内容裁剪
  • 溢出裁剪
  • 超出隐藏

示例

Weboverflow原生支持点选数值,样本实时变化

这段内容比容器高,用来看溢出的部分会被裁掉、还是照样画出来、还是给一条滚动条。后面这些字就是超出去的部分。

overflow: hidden;

其他平台的相似实现

iOS原生支持
clipped异名

官方描述是「把这个视图裁剪到它的外接矩形框」。

看 iOS 视角 →
Android原生支持
clip异名

官方描述只有一句「把内容裁剪到形状」。

看 Android 视角 →

使用规范

什么时候用

  • 图片要被容器的圆角切出形状时
  • 子元素可能超出容器但不希望它压到旁边内容时

什么时候别用

  • 超出的内容用户仍然需要看到 → 让它滚动,而不是切掉
  • 阴影、浮层这类本来就该越界的元素被一起切掉时

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →