尽量减少表格中的换行符

Question

我有一些由 API 提供内容的表格，我想让内容大小自然，但遇到了一些奇怪的换行符。

img {
  height: 24px;
}
table {
  width: 600px;
}

<table>
   <thead>
      <tr>
         <th></th>
         <th></th>
         <th>Cool</th>
         <th>Upgrade</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><img src="https://www.gstatic.com/images/branding/productlogos/youtube_go_ios/v10/192px.svg"></td>
         <td>A very long description and it's going to run over two lines because it's super duper amazingly crazy long</td>
         <td><img src="https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/done/default/24px.svg"></td>
         <td><img src="https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/done/default/24px.svg"></td>
      </tr>
      <tr>
         <td><img src="https://www.gstatic.com/images/branding/productlogos/youtube_go_ios/v10/192px.svg"></td>
         <td>A kinda long description</td>
         <td>10 GB</td>
         <td>10 TB</td>
      </tr>
   </tbody>
</table>

在上面的示例中，超长描述太长，以至于它总是会溢出到两行，但它缩小了“10 GB”单元，使其成为两行，这是不希望的。

如果不在任何特定列上使用任何特定的大小调整规则，是否有一种方法可以在不需要时最大限度地减少换行符？

Answer 1

您可以使用

white-space: nowrap

抑制所选列中的换行符。

img {
  height: 24px;
}
table {
  width: 600px;
}
td:nth-child(3), td:nth-child(4) {
  white-space: nowrap;
}

<table>
   <thead>
      <tr>
         <th></th>
         <th></th>
         <th>Cool</th>
         <th>Upgrade</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><img src="https://www.gstatic.com/images/branding/productlogos/youtube_go_ios/v10/192px.svg"></td>
         <td>A very long description and it's going to run over two lines because it's super duper amazingly crazy long</td>
         <td><img src="https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/done/default/24px.svg"></td>
         <td><img src="https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/done/default/24px.svg"></td>
      </tr>
      <tr>
         <td><img src="https://www.gstatic.com/images/branding/productlogos/youtube_go_ios/v10/192px.svg"></td>
         <td>A kinda long description</td>
         <td>10 GB</td>
         <td>10 TB</td>
      </tr>
   </tbody>
</table>