AI 摘要：本文提出了一种创新的 CSS 实验性方案，旨在解决困扰开发者多年的“Shrinkwrap”难题：当块级元素内的文本自动换行时，容器宽度依然占据最大可用空间而非紧贴文本内容的现象。
作者 Roman Komarov 通过巧妙结合 Anchor Positioning（锚点定位）进行尺寸测量，并利用 Scroll-Driven Animations（滚动驱动动画）将测量值跨层级传递给父元素，从而动态调整容器尺寸。尽管该技术在 HTML 结构上有一定要求且目前仍处于实验阶段，但它为实现真正的紧凑包裹效果（如聊天气泡、自适应提示框等）提供了全新的纯 CSS 路径。

1. 核心挑战与背景 (The Problem)
• 解释“Shrinkwrap”问题：当元素内的内容（如文本）自动换行时，CSS 的 shrink-to-fit 算法通常会让容器扩展到最大可用宽度，导致视觉上出现多余的空白。
• 回顾该问题在 CSS 规范（CSSWG）中长达十年的讨论，以及 text-wrap: balance 等新属性如何凸显了这一缺陷。

2. 技术实现原理 (The Base Technique)
• 结构设计： 采用四层嵌套 HTML 结构，包括容器、内容包装器、源元素和探测元素 (probe)。
• 远程测量 (Remote Dimension Measuring)： 利用 Anchor Positioning（锚点定位）来确定内部行内元素的边界。
• 数值传递： 结合 Scroll-Driven Animations（滚动驱动动画）和自定义属性（CSS Variables），将测量到的像素值转换成可以在父元素中使用的数值，从而动态设置 inline-size（行向尺寸）。

3. 代码实现与 API (Code & Limitations)
• 展示核心 CSS 代码，利用 @property 定义变量，通过 animation-range 和 view-timeline 实现尺寸捕捉。
• 使用限制： 元素必须仅包含 Phrasing Content（短语内容，即行内元素）；目前主要在 Chrome 和 Safari 中运行，且 Safari 存在某些实验性 Bug。
• API 定义： 提供 --sw-limit（限制宽度）和 --sw-padding（间距调整）等自定义属性。

4. 进阶复杂场景 (Complex Content)
• 多锚点策略 (Multiple Explicit Anchors)： 演示如何处理具有多个 Flex（弹性布局）或 Grid（网格布局）项的容器包裹。
• 链式锚点 (Chained Anchors)： 针对不确定数量的项目，提出一种基于容器查询（Container Queries）和锚点链的自动化测量方案（目前仅 Chrome 支持较好）。
• 内容重复法： 探讨解决导航菜单等具有复杂相互依赖关系的布局方案。

5. 实际应用案例 (Use Cases)
• 聊天气泡 (Chat Bubbles)： 让气泡背景完美贴合换行后的文本，保持美观的视觉边距。
• 表单分组标题 (Fieldsets and Legends)： 解决 legend 标签在换行时导致的边框对齐问题。
• 覆盖图注 (Overlay Image Captions)： 实现图片上的半透明遮罩背景随文本长度动态收缩。
• 提示框 (Tooltips)： 优化设计系统中的气泡提示，使其在不同文本长度下都能保持紧凑。

6. 总结与未来趋势 (What's Next)
• 作者呼吁浏览器厂商提供原生的 CSS 属性或函数来简化这一过程。
• 强调简单场景的解决方案已趋于成熟，而跨依赖的复杂布局仍是未来探索的方向。