内容裁剪布局

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

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

示例

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

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

overflow: hidden;

Web / iOS / Android 对照

Web原生支持

平台通用范围

overflow

CSS: overflow

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

iOS原生支持

平台通用范围

clipped

也叫 clipped(antialiased:)

SwiftUI: View.clipped(antialiased:)

官方描述是「把这个视图裁剪到它的外接矩形框」。官方还写明了默认行为：「视图的外接框默认只用于布局，所以超出框边缘的内容仍然可见」—— 也就是说不写这个修饰符就不裁剪，与 Web 默认的 visible 结论一致但框架不同：那边是盒模型，这边是「框只管布局」。

Android原生支持

平台通用范围

clip

也叫 Modifier.clip

Compose: Modifier.clip(shape)

官方描述只有一句「把内容裁剪到形状」。参数是形状而不是开关 —— 裁剪边界由传入的形状决定，圆角裁剪与矩形裁剪是同一个入口的不同取值，不像 iOS 那样分成裁到外接框与裁到形状两个接口。

使用规范

什么时候用

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

什么时候别用

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

容易混淆

宽高比

宽高比决定这块区域是什么形状，内容裁剪决定装不下的部分怎么办。

滚动区域

内容裁剪把超出的部分切掉，滚动区域把超出的部分留着让用户滚过去看。

给 AI 的提示词

这条词条还没有经过验证的实现提示词。