CSS 网格 - 如何阻止无关文本创建自动行？

Question

我正在尝试对一些预先存在的内容进行样式设置，但无法编辑 HTML。代码中有一个随机的“ ”导致 CSS 网格创建新行。当没有要定位的 html 或类时如何停止自动行？

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;
}
 td.product-name span {
  
 border: 1px solid;
 }
.product-image {
grid-area: left;
}
 .product-name {
     grid-area: righta;
}
 .product-quantity {
     grid-area: rightb;
}
 .variation {
     grid-area: rightc;
}

<table>
<tr class="cart_item">
  <td class="product-name">
    <span class="product-image"><img width="50" height="50" src="https://i.imgur.com/1o3KcN6.png"></span>
    <span class="product-name">Product 1</span>
    &nbsp; <- remove the row created by this nbsp;
    <span class="product-quantity">QTY 1</span>
    <span class="variation">var 1</span>
  </td>
  <td class="product-total">
    <span class="amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>48</bdi>
    </span>
  </td>
</tr>
</table>

Answer 1

一种选择可能是使其成为显式行 (

grid-template-rows: 1fr 1fr 1fr 0;

) 并赋予其零高度：

td.product-name {
  display: grid;
  grid-template-columns: 60px 3fr;
  grid-template-rows: 1fr 1fr 1fr 0;
  grid-template-areas: " left righta " " left rightb " "left rightc";
  grid-auto-flow: dense; 
  border: 1px solid;
}
 
td.product-name span {
  border: 1px solid;
}

.product-image {
  grid-area: left;
}

.product-name {
  grid-area: righta;
}

.product-quantity {
  grid-area: rightb;
}

.variation {
  grid-area: rightc;
}

<table>
<tr class="cart_item">
  <td class="product-name">
    <span class="product-image"><img width="50" height="50" src="https://i.imgur.com/1o3KcN6.png"></span>
    <span class="product-name">Product 1</span>
    &nbsp;
    <span class="product-quantity">QTY 1</span>
    <span class="variation">var 1</span>
  </td>
  <td class="product-total">
    <span class="amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>48</bdi>
    </span>
  </td>
</tr>
</table>