如何让卡片正文文本行数随可用垂直空间动态调整？

算力阿峰

2026-8-9

问题描述

我的截图

我有一个包含头部、正文和底部三部分的卡片（如图所示）。我希望在正文中仅显示部分完整内容，并在末尾添加省略号。

我知道可以使用webkit-line-clamp和overflow: hidden实现该效果，但这种方法只能设置固定的行数。当卡片头部高度较小时，会导致该行中其他卡片的高度不一致。我希望正文行数能动态适配，使卡片高度保持均匀。请问仅用CSS能否实现该效果？如果不能，最佳实现方案是什么？

以下是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
<body>
    <style>
        /* .body-content {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        } */
    </style>

    <div class="container">
        <div class="row">

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="header-content mb-3">
                            <h4>This is Header Text 1 This is Header Text 1 This is Header Text 1 This is Header Text 1</h4>
                        </div>
                        <div class="body-content mb-3">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus ex laborum repellendus esse itaque velit quam, quisquam et! Similique officiis dignissimos eligendi? Nihil quidem inventore ad minus! Aliquid, dolore laudantium.
                            </p>
                        </div>
                        <div class="footer-content">
                            <h6>This is Footer</h6>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="header-content mb-3">
                            <h4>This is Header Text 2 This is Header Text 2</h4>
                        </div>
                        <div class="body-content mb-3">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus ex laborum repellendus esse itaque velit quam, quisquam et! Similique officiis dignissimos eligendi? Nihil quidem inventore ad minus! Aliquid, dolore laudantium.
                            </p>
                        </div>
                        <div class="footer-content">
                            <h6>This is Footer</h6>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

解决方案

仅用CSS无法实现动态行数适配

目前CSS没有原生特性支持根据剩余空间自动调整文本截断行数，webkit-line-clamp必须指定固定行数，没法根据头部高度变化自动计算正文可显示的行数。

最佳实现方案：CSS Grid + JavaScript 结合

步骤1：用CSS Grid固定卡片布局

先给卡片的card-body设置Grid布局，让头部和底部占据自身所需高度，正文自动填充剩余空间，同时确保所有卡片高度统一：

.card {
  height: 100%;
}

.card-body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem; /* 替换原有的mb-3，统一间距 */
  height: 100%;
}

.body-content {
  overflow: hidden;
  line-height: 1.5; /* 明确设置行高，方便JS计算 */
}

步骤2：JavaScript计算剩余空间并设置截断逻辑

通过获取头部和底部的高度，计算正文可用空间，再根据行高算出可显示行数，最终动态设置webkit-line-clamp：

// 初始化处理所有卡片正文
function adjustBodyContent() {
  document.querySelectorAll('.body-content').forEach(content => {
    const cardBody = content.closest('.card-body');
    const header = cardBody.querySelector('.header-content');
    const footer = cardBody.querySelector('.footer-content');
    
    // 计算各部分高度
    const totalHeight = cardBody.offsetHeight;
    const headerHeight = header.offsetHeight;
    const footerHeight = footer.offsetHeight;
    const gap = parseInt(getComputedStyle(cardBody).gap);
    
    // 正文可用高度 = 总高度 - 头部 - 底部 - 上下间距
    const availableHeight = totalHeight - headerHeight - footerHeight - gap * 2;
    const lineHeight = parseInt(getComputedStyle(content).lineHeight);
    
    if (lineHeight === 0) return;
    
    // 计算可显示的最大行数
    const maxLines = Math.floor(availableHeight / lineHeight);
    
    // 设置截断样式
    content.style.display = '-webkit-box';
    content.style.webkitBoxOrient = 'vertical';
    content.style.webkitLineClamp = maxLines;
    content.style.textOverflow = 'ellipsis';
  });
}

// 页面加载完成后执行
window.addEventListener('load', adjustBodyContent);
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustBodyContent);

补充说明

该方案能确保同行所有卡片高度一致，正文根据剩余空间自动调整截断行数；
若头部内容会动态变化，可在内容更新后重新调用adjustBodyContent()函数；
必须给.body-content明确设置行高，否则JavaScript无法准确计算可显示行数。

内容的提问来源于stack exchange，提问作者WiseTy