重复渲染组件（卡片/列表行/表格单元）内容长度不一时如何保持…

当同一组件被多次渲染且各实例文本长度不同时，用固定槽位模型让所有实例看起来一致。

适用场景

解决思路

1. 把重复组件当作固定槽位模型而非自由容器：先命名所有槽位（如媒体、徽章、标题、副标题、描述、页脚），并让每个实例按相同顺序填充相同槽位。
2. 让恰好一个槽位吸收长度差异（通常是描述/摘要），其余槽位固定或截断。
3. 锚点元素（CTA、价格、状态、趋势值）必须固定位置：垂直布局用 margin-top: auto 把页脚钉到底部，水平布局用 margin-left: auto 把状态钉到右边。
4. 垂直布局中让实例等高：容器用 CSS Grid 或 Flex 并保持 align-items: stretch（默认值，不要覆盖），实例设 height: 100% 填满轨道，再用 margin-top: auto 对齐页脚。
5. 媒体槽位用固定 aspect-ratio（如 aspect-ratio: 4 / 3）加 object-fit: cover，避免媒体高度变化。
6. 水平布局中让标题吸收宽度差异：.row__title { flex: 1; min-width: 0; }，min-width: 0 是允许文本收缩/省略的必需条件。
7. 不要用硬编码 height 强制等高——最高实例会决定尺寸，超出内容会被裁剪或溢出；应让轨道拉伸并钉住锚点。
8. 可选槽位（徽章、折扣标签、认证标记）用两种方式之一避免推移后续槽位：预留空间（容器设 min-height，无内容时也占位）或绝对定位覆盖（position: absolute）使其脱离文档流。
9. 多行文本用 -webkit-line-clamp 限制行数：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden。
10. 单行值（名称、SKU、路径）用省略号：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0。
11. 截断后必须让完整值可恢复：纯文本用原生 title 属性，需要触屏支持/样式/富内容时用自定义 tooltip，完整内容本身是重点时用「Read more」就地展开或打开详情。
12. 只在文本确实溢出时才附加 tooltip：检测 scrollWidth > clientWidth 后条件设置 title，避免对未截断文本加多余悬停提示。
13. 按优先级处理变长内容：优先让内容作者按目标长度写作（如标题 ≤ 60 字符、摘要 ≤ 120），截断只作安全网；无法保证时用截断+恢复；仅允许一个槽位用 flex 增长吸收差异。
14. 国际化时按最长语言设计槽位：德语、芬兰语常比英语长 30–40%，要截断文本、预留可选槽位、给 flex 行加 min-width: 0，不要假设标签在源语言单行就能在译文单行。
15. 按检查清单复核：槽位模型是否定义、是否用拉伸轨道而非硬编码高度等高、锚点是否钉住、是否只有一个槽位吸收差异、可选槽位是否预留或覆盖、媒体是否固定宽高比、多行是否截断单行是否省略、截断的 flex 行是否有 min-width: 0、完整值是否可恢复、tooltip 是否仅在溢出时加、作者是否有目标长度、是否用最长译文语言验证过。

适用边界 · 注意事项

• 内容长度天然需要自由流动、不要求跨实例对齐的场景（如文章正文、聊天消息气泡）。
• 只有单个实例、不存在兄弟实例对齐问题的组件。
• 内容极短且长度几乎恒定、截断与槽位预留反而增加无谓复杂度的场景。