长标题可能超过一行，应该被截断
描述文本内容，用于展示变高度网格项的效果。
一、目标与设计要点
适用场景与问题定位
场景描述：在使用 CSS Grid 构建可变高度网格的卡片时，文本长度可能差异导致网格项高度不统一，影响视觉对齐。
目标：实现每个网格项仅显示第一行文本，保持网格布局的整齐和可读性。
设计原则
本方案以文本截断为核心，结合网格项的高度控制，确保每个卡片高度的一致性，同时保留标题在第一行内完整显示。
我们将重点放在跨浏览器兼容、易维护、可重用性，避免复杂的 JavaScript 依赖，尽量用 CSS 实现。
二、核心技术：单行文本截断的实现
基于 -webkit-line-clamp 的实现
关键技巧：使用 CSS 属性 display: -webkit-box; 与 -webkit-line-clamp: 1; 和 -webkit-box-orient: vertical; 来限制文本仅显示一行。
兼容性要点：该方法在 WebKit 内核的浏览器（如 Chrome、Safari）表现最佳，Firefox 需要降级方案。
.card__title {display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;
}降级方案与兼容性
降级要点：为了在 Firefox、Edge 的老版本中实现同样效果，可以使用 white-space: nowrap;、overflow: hidden;、text-overflow: ellipsis; 的组合，但需要为首行设置固定高度或行高。
.card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }可复用的 CSS 组件
目标：把文本截断逻辑封装成可复用的类，方便在不同网格项中快速应用。
下面给出一个可重用的组合类示例，以及如何在 HTML 结构中应用。
/* 可复用的文本截断类（单行） */
.truncated-1line {display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;
}
@supports not (-webkit-line-clamp: 1) {.truncated-1line {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
}
三、实战演练：完整示例
HTML 架构
结构要点：每个网格项包含一个标题区域和一个简短描述，标题区域应用 class="truncated-1line" 来确保只显示第一行。
短标题
描述文本较短。
CSS 关键样式
要点：将网格容器设为自适应列，网格项内部高度可以变化，但标题列为单行截断。
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 16px;
}
.card {border: 1px solid #ddd;border-radius: 8px;padding: 12px;background: #fff;
}
.card__title { /* 与上面的截断规则组合使用 *//* 直接应用 truncated-1line 类也可 */
}
综合应用示例
实践要点：确保网格项的其他内容（如图像或描述）不会意外撑大标题区域，保持整齐的第一行可见。
一个实际标题，长度随意
这里是描述文本，用于展示网格项的高度变动。
短标题
描述文本较短。
四、注意事项与兼容性
浏览器兼容性与回退策略
关键点：Firefox 对 -webkit-line-clamp 的支持程度有限，因此需要考虑回退方案以确保在多数浏览器中能工作。
通过将首选方案设为 -webkit-line-clamp，并在不支持的情况下使用 单行截断回退，可实现平滑降级。
性能与可维护性
关注点：纯 CSS 的文本截断对性能影响很小，但在大量网格项时，确保选择合适的最小高度和字体大小以避免渲染抖动。
