CSS Grid：如何阻止冗余文本自动创建新行？

无法编辑现有HTML代码，代码中存在随机的 （非换行空格），这些匿名文本节点会被CSS Grid视为网格项，导致自动创建多余行。部分行包含2个元素，部分包含3个，在无法定位对应HTML元素或类的情况下，如何阻止这种自动换行？

解决方案 #

方法：隐藏匿名文本节点（最直接有效） #

由于CSS Grid会将容器内所有直接子节点（包括文本节点）当作网格项布局，我们可以通过将容器内的匿名文本节点（即 ）缩至0尺寸，使其不占据布局空间，同时恢复正常元素的显示样式：

td.product-name {
  /* 原有样式保留 */
  display: grid;
  grid-template-columns: 60px 3fr;
  grid-template-rows: auto;
  grid-template-areas: "left righta" "left rightb" "left rightc";
  grid-auto-flow: dense; 
  border: 1px solid;
  /* 添加以下样式隐藏匿名文本节点 */
  font-size: 0;
}

/* 恢复span元素的正常字体大小 */
td.product-name span {
  border: 1px solid;
  font-size: 16px; /* 可根据实际需求调整字号 */
}

/* 原有网格区域样式保留 */
.product-image {
  grid-area: left;
}
.product-name {
  grid-area: righta;
}
.product-quantity {
  grid-area: rightb;
}
.variation {
  grid-area: rightc;
}

原理说明 #

• 将td.product-name的font-size设为0后，容器内所有未被包裹的文本节点（包括 ）会被压缩至0尺寸，不会被CSS Grid识别为需要布局的网格项。
• 单独为span元素恢复字体大小，确保正常内容的显示不受影响。
• 该方案无需定位额外的HTML元素或类，仅通过调整容器和子元素的字体样式即可解决问题，适配所有现代浏览器。

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