如何在 CSS Grid 中动态隐藏溢出项目并实现响应式截断-js教程-PHP中文网

如何在 CSS Grid 中动态隐藏溢出项目并实现响应式截断

本文介绍如何通过 JavaScript 动态控制 CSS Grid 项目的可见性，并结合 white-space: nowrap、text-overflow: ellipsis 和条件显示逻辑，在空间不足时优先隐藏次要内容（如状态栏），再逐步隐藏摘要项，确保关键信息（如 Jira ID）始终单行完整显示。

本文介绍如何通过 javascript 动态控制 css grid 项目的可见性，并结合 `white-space: nowrap`、`text-overflow: ellipsis` 和条件显示逻辑，在空间不足时优先隐藏次要内容（如状态栏），再逐步隐藏摘要项，确保关键信息（如 jira id）始终单行完整显示。

在构建紧凑型数据展示网格（例如任务看板、工单列表）时，常需在有限水平空间内智能裁剪非核心内容。本方案采用「渐进式隐藏」策略：当容器宽度收缩时，首先隐藏最不关键的第 4 列（状态，如“In progress”），进一步缩小时再隐藏第 3 列（摘要），而第 1 列（Jira ID）和第 2 列（图标）始终保持可见且不换行。

核心实现包含三部分：

CSS 基础样式保障
所有 grid item 需强制单行显示与文本截断：

.grid-container > div {
  padding-right: 10px;
  white-space: nowrap;    /* 禁止换行 */
  overflow: hidden;       /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

同时定义响应式列布局：

.grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto; /* 第3列为弹性填充，其余自适应 */
}

JavaScript 动态显隐控制
通过输入值实时计算并切换元素显示状态，实现精细粒度响应：

function handleWidth() {
  const inputValue = parseFloat(document.getElementById("widthInput").value) || 100;
  const gridContainer = document.querySelector(".grid-container");
  const summaryItem = gridContainer.children[2]; // 第3个子元素（索引2）
  const statusItem = gridContainer.children[3];   // 第4个子元素（索引3）

  gridContainer.style.width = `${inputValue}%`;

  // 当宽度 ≤ 50% 时隐藏状态栏；≤ 25% 时同时隐藏摘要
  statusItem.style.display = inputValue <blockquote><p>✅ 注意：使用 <code>parseFloat()</code> 防止字符串比较错误；直接操作 <code>.children</code> 比 <code>querySelector</code> 更高效且避免伪类歧义。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div></blockquote>

增强健壮性的补充建议
- 回退方案：添加 @media (max-width: 600px) 媒体查询作为纯 CSS 备用方案，提升无 JS 环境兼容性；
- 可访问性：被隐藏的内容应保留语义结构（不使用 visibility: hidden 或移除 DOM），必要时可通过 aria-hidden="true" 标注；
- 性能优化：若频繁调整，建议节流 handleWidth 或改用 ResizeObserver 监听容器尺寸变化。