line-clamp是解决多行文本溢出最直接有效的方式，需配合display: -webkit-box、-webkit-line-clamp、overflow: hidden及-webkit-box-orient: vertical使用。
卡片内容过长撑坏布局，核心是控制文本溢出行为。用 text-overflow 只能处理单行截断，真正限制“行数”得靠 line-clamp —— 它是解决多行文本溢出最直接有效的方式。
确保 line-clamp 生效的前提条件
line-clamp 不是独立属性，它依赖于特定的显示上下文才能起作用：
- 父容器必须设置
display: -webkit-box（或display: flex配合其他规则，但原生支持仍以 -webkit-box 为主） - 必须指定
-webkit-line-clamp: N（N 是你想显示的最大行数） - 必须设置
overflow: hidden，否则截断不生效 - 推荐加上
-webkit-box-orient: vertical，明确子元素垂直堆叠
基础用法示例（三行截断）
给卡片标题或描述文字加以下样式即可：
.card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
这样无论原文本有多长，都只显示前 3 行，末尾自动加省略号（…）。注意：该写法在现代浏览器中兼容良好（Chrome、Edge、Safari、Firefox 73+），无需额外 Polyfill。
立即学习“前端免费学习笔记（深入）”；
搭配 text-overflow 处理单行场景
如果卡片里有短文本区域（如标签名、用户名），更适合单行截断：
- 设置
white-space: nowrap防止换行 - 加上
overflow: hidden和text-overflow: ellipsis - 记得限定宽度（比如
max-width: 120px），否则 ellipsis 不触发
例如：.card-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
响应式与字体适配的小提醒
line-clamp 按“行数”截断，不是按像素或字数，所以要注意：
- 行高（
line-height）变化会影响实际显示高度，建议固定line-height值 - 小屏幕下可配合媒体查询减少行数，比如
@media (max-width: 480px) { .card-text { -webkit-line-clamp: 2; } } - 中文字体和英文混排时，个别字符可能撑开单行高度，测试时多用真实数据验证
基本上就这些。用对 line-clamp 的组合规则，卡片文本就能稳稳待在框里，不再撑破布局。
