如何防止HTML/CSS中带有破折号的表格单元格自动换行？

Question

我知道我的问题看起来与这个问题非常相似：如何防止表格单元格中的文本换行，这是我第一个检查的。

我有一个表格，在其中一个列中我将写入一个很长的描述，下一列是日期。浏览器认为把日期列换行是很酷的，因为它们是用破折号分隔的字符串。目前我有这样的内容：

| Description                | Date     |
|----------------------------|----------|
| This is a really long      | 2022-10- |
| description cell with many | 12       |
| lines...                   |          |

我如何告诉浏览器我希望我的描述单元格稍微短一些，日期列不换行。在我阅读的解决方案中，它说你应该使用，这对于空格有效，但对于破折号无效。

我应该使用不收缩的弹性元素吗？

---

通过缩短描述，我是指：

| Description              | Date       |
|--------------------------|------------|
| This is a really long    | 2022-10-12 |
| description cell with    |            |
| many lines...            |            |

Answer 1

你应该为日期列使用white-space: nowrap;。当你说你想要描述单元格更短时，我不确定你的意思是什么？只需调整宽度以获得所需的结果。

Answer 2

只需在CSS中添加 white-space:nowrap，它将使所有内容都在一行上显示。请参见下方

table {
  border-collapse: collapse;
  width: 100px;
}

td {
  border: 1px solid gray;
  padding: 0.25rem 0.5rem;
}

td:last-child {
  white-space: nowrap;
}

<table>
  <tr>
    <td>Description</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>This is a really long description cell with many lines</td>
    <td>2022-10-12</td>
  </tr>
</table>