如何防止HTML/CSS中帶有破折號的表格儲存格自動換行？

Question

我知道我的問題看起來與這個問題非常相似：如何防止表格單元格中的文字換行，這是我第一個檢查的。

我有一個表格，在其中一個欄位中我將寫入一個很長的描述，下一列是日期。瀏覽器認為把日期列換行是很酷的，因為它們是用破折號分隔的字串。目前我有這樣的內容：

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

我如何告訴瀏覽器我希望我的描述單元格稍微短一些，日期列不換行。在我閱讀的解決方案中，它說你應該使用，這對於空格有效，但對於破折號無效。

我應該使用不收縮的彈性元素嗎？

---

透過縮短描述，我是指：

| 說明 | 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>