在流体高度的容器布局场景中，实现内部元素仅显示首行内容并隐藏溢出部分，是前端开发中常见的需求。传统的方案往往需要先固定容器高度再配合行高计算，在容器高度动态变化时会失效，而CSS Grid可以通过自身的布局特性轻松解决这个问题。
核心实现思路
要实现流体高度下的首行显示与溢出隐藏，核心是利用CSS Grid的轨道尺寸控制和溢出属性配合。首先需要将容器设置为grid布局，然后通过grid-template-rows属性限制内容区域的行高，再配合overflow属性隐藏超出部分即可。
关键属性说明
- grid-template-rows：定义grid容器的行轨道尺寸，这里我们只需要设置第一行轨道的尺寸为
1fr或者固定行高，后续行轨道设置为0即可 - overflow: hidden：隐藏容器超出可视区域的内容，避免多余内容撑开容器
- grid-auto-rows：定义自动生成的行轨道尺寸，这里设置为0可以阻止后续行被渲染出来
完整实现示例
下面是一个完整的示例，容器高度会随父元素变化，内部文本仅显示首行，多余内容隐藏：
/* 流体高度容器样式 */
.fluid-container {
height: 100%; /* 容器高度继承父元素，实现流体高度 */
display: grid;
/* 第一行轨道占满容器高度，后续自动生成的行轨道高度为0 */
grid-template-rows: 1fr;
grid-auto-rows: 0;
overflow: hidden;
}
/* 内部文本内容样式 */
.content-text {
/* 保证文本不换行，避免内容折行后占多行 */
white-space: nowrap;
/* 文本溢出时显示省略号，可选配置 */
text-overflow: ellipsis;
/* 避免内容边距影响高度计算 */
margin: 0;
padding: 0;
}
对应的HTML结构如下：
<div class="parent-container" style="height: 60px;">
<div class="fluid-container">
<p class="content-text">这是一段很长的文本内容，当容器高度仅为单行高度时，多余的内容会被自动隐藏，不会撑开容器的高度，也不会显示出来。</p>
</div>
</div>
场景适配说明
如果容器内部不是纯文本，而是包含多个子元素需要仅显示首行，只需要调整grid-template-rows的设置，将第一行轨道设置为需要的高度，同时给子元素设置合适的外边距即可。比如子元素有固定高度时，可以将grid-template-rows设置为40px，这样容器高度动态变化时，始终只会显示第一个40px高的子元素，其余内容自动隐藏。
注意事项
- 如果容器内部有padding或者border，需要计算到容器总高度中，避免出现内容被意外裁切的情况
- 当内容需要换行显示首行时，可以将
white-space设置为normal，同时调整grid-template-rows为对应的行高数值 - 这种方案不需要依赖JavaScript计算高度，性能比传统方案更优，适配各种动态高度场景
CSS_Grid流体高度首行显示溢出隐藏grid_layout修改时间：2026-06-23 18:00:26