text-overflow: ellipsis 在卡片中不生效的主因是 Grid/Flex 子元素默认 min-width: auto，强制撑宽导致溢出；需在子元素上设 min-width: 0 并满足宽高固定、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 四条件。
为什么 text-overflow: ellipsis 在卡片里不生效
不是 CSS 写错了，而是卡片容器（比如 .card）用了 display: grid 或 flex，子元素默认有 min-width: auto —— 浏览器会优先按“整段不可折行文本的最小宽度”来撑开它，text-overflow 根本没机会触发。
典型表现：长 URL、无空格英文串、中文混排数字串（如 "v1.2.3-beta"）直接溢出卡片右边界，甚至把整个布局顶歪。
-
white-space: nowrap必须配合overflow: hidden和固定宽高才起作用 -
text-overflow: ellipsis只对单行有效；多行要用-webkit-line-clamp（且仅 WebKit 内核可靠） - Grid 布局下，
min-width: 0比overflow: hidden更可控——后者可能意外裁掉图标或装饰元素
单行省略：必须同时满足四个条件
漏掉任意一个，text-overflow: ellipsis 就是摆设。
- 容器宽度固定或受限（如
max-width: 300px或grid-column: span 2） white-space: nowrapoverflow: hiddentext-overflow: ellipsis
示例（用于卡片标题）：
.card-title {
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
⚠️ 注意：margin 和 padding 会影响可用宽度，建议显式重置 margin 避免意外撑开。
多行省略：别只靠 -webkit-line-clamp
-webkit-line-clamp: 2 看似方便，但它依赖 display: -webkit-box，在 Firefox 或 Safari 某些版本下行为不一致；更麻烦的是，它和 Grid 的 min-width: auto 冲突依然存在。
- 必须加
min-width: 0或overflow: hidden到同一元素上 -
line-height要用无单位值（如1.5），避免因字体缩放导致截断错位 - 如果卡片内容需支持屏幕阅读器，
aria-label应保留完整文本，不能只给省略后的字符串
最小可靠组合：
.card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-width: 0; /* 关键 */
overflow: hidden;
line-height: 1.5;
}
Grid 卡片里最稳的通用写法
与其逐个元素加 min-width: 0，不如在卡片项（即 .card > *）上统一处理，一劳永逸。
- 对所有直系子项设置
min-width: 0，不影响 flex/grid 自动计算主轴尺寸 - 再单独为需要省略的文本元素加
text-overflow或-webkit-line-clamp - 避免用
overflow: hidden全局加——可能掩盖图标、角标、hover 效果等视觉反馈
推荐卡片基础样式：
.card > * {
min-width: 0;
}
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
真正容易被忽略的是：这个 min-width: 0 必须加在 grid item 上，而不是父容器 .card。加错位置，整个方案就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
