应使用flex布局配合-webkit-line-clamp实现弹性等高与行数截断：卡片设display: flex+flex-direction: column，内容区用-webkit-box+line-clamp控制行数，底部按钮加margin-top: auto吸附到底部，避免设height破坏stretch拉伸逻辑。
文字超出卡片高度，不是“截掉就完事”，而是排版逻辑没对齐：卡片内容高度不可控，但视觉锚点（比如底部按钮）必须稳定。直接设 height 或用 JS 截字，只会让布局僵硬、响应失效、可访问性下降。
为什么不能给 .card 设固定 height？
Flex 等高依赖子项自然高度计算，height、max-height、min-height 会直接打断 align-items: stretch 的拉伸行为。结果是：文字少的卡片被撑开，文字多的被裁切，底部按钮位置飘移——看起来像“高度不一致”，其实是布局逻辑被手动锁死了。
- 设
height: 200px→ 所有卡片强制统一高度，内容溢出被隐藏或滚动 - 设
max-height: 200px→ 溢出部分消失，但 flex 拉伸失效，等高失效 - 用 JS 动态截字 → 首屏渲染慢、SEO 不友好、屏幕阅读器读不到完整文本
用 -webkit-line-clamp 实现纯 CSS 行数截断
这是目前最轻量、兼容性足够（Chrome 4+、Safari 7+、Firefox 68+）、不影响布局流的方案。它只作用于块级容器内的第一层文本流，不干扰 flex 布局计算。
- 必须配合
display: -webkit-box和-webkit-box-orient: vertical -
line-clamp是行数控制，不是像素高度，所以能适配不同字号/行高 - 别在
.card上直接用，而是在具体文本容器里（如.card-content或.card-desc）
示例：
.card-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
卡片内部结构怎么组织才不崩？
核心原则：让卡片自身成为 flex 容器，靠弹性分配空间，而不是靠绝对定位“钉死”内容。
-
.card { display: flex; flex-direction: column; }—— 启用垂直主轴 - 标题和描述保持正常文档流（不设
height、不加position: absolute） - 底部按钮加
margin-top: auto，自动吸到底部，不管上面内容几行 - 如果需要文字区域最大高度限制，只在
.card-desc上设max-height+overflow: hidden，不影响整体 flex 高度计算
flex-wrap 换行后文字截断失效？检查 gap 和子项宽度计算
换行场景下，常见问题是 flex-basis 计算错误导致卡片宽度浮动，进而影响 -webkit-line-clamp 的实际生效行数（因为容器宽度变了，每行能塞的字数就变）。
- 避免用
width: 33.33%，改用flex: 0 0 calc(33.33% - var(--gap))，其中--gap是你定义的gap值 - 确保父容器用了
gap（而非margin），否则外边距合并会让宽度计算失准 - Safari 15.6 及更早版本不支持
gap在 flex 中的表现，若需兼容，改用 grid 布局，或 fallback 到padding+margin组合
真正难的不是截断，而是让截断不破坏卡片的弹性语义——文字可以少，但结构不能塌；内容可以长，但底部锚点必须稳。所有 hack 都绕不开这个前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
