为卡片网格中的描述文本提供四行截断与悬停提示，仅在溢出时显示…

# 商品卡片价格描述四行截断方案

一、问题定位

• 12张卡片中，价格约2500元区间的商品描述文案偏长（五六十字），导致卡片高度不一致，网格错位。
• 目标：描述统一最多显示4行，超出部分省略；鼠标悬停时显示完整内容。

二、核心实现：CSS line-clamp 截断

给描述文字容器加一个 class（如 .card-desc），写以下样式：

```css

.card-desc {

display: -webkit-box;

-webkit-line-clamp: 4; /* 限制4行 */

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

/* 建议固定行高，保证卡片高度一致 */

line-height: 1.6;

}

```

三、悬停显示全文的两种方案

方案A：悬停展开（推荐，最简单）

```css

.card:hover .card-desc {

-webkit-line-clamp: unset; /* 解除截断 */

}

```

• 优点：零依赖、体验自然。
• 注意：展开会把卡片撑高，若网格用 align-items: stretch 会影响同排卡片，建议网格容器设 align-items: start。

方案B：悬停浮层（不改变布局）

• 用 title 属性兜底：<p class="card-desc" title="完整描述...">
• 或自定义 tooltip：悬停时显示 position: absolute 的浮层展示全文，卡片高度完全不变，视觉更稳定，但需多写一点 JS/CSS。

四、布局配套建议

1. 卡片内部用 flex 纵向布局：图片区固定高度（或固定宽高比），标题最多1~2行截断，描述4行截断，价格区固定在底部（margin-top: auto），这样无论文案多长，12张卡片高度完全一致。

2. 网格用 CSS Grid：grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，配合上面截断即可整齐排列。

3. 移动端注意：触屏没有 hover，建议移动端保留截断不展开，或点击卡片进入详情页看全文。

五、验收要点

• 12张卡片四边对齐、高度一致；
• 超过4行的描述末尾出现省略号；
• 桌面端悬停能看到全文，移动端不受影响。