有人知道如何防止表格單元格中的文本換行嗎？這是一個(gè)表格的標(biāo)題，標(biāo)題比它下面的數(shù)據(jù)要長得多，但是我需要它只顯示在一行上。如果柱子很寬也沒關(guān)系。

我的(簡化的)表格的HTML如下所示:

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

由于頁面上javascript的原因，標(biāo)題本身被包裝在th標(biāo)記內(nèi)的div中。

表格出來了，標(biāo)題換行到多行。這似乎只有當(dāng)表格足夠?qū)挄r(shí)才會(huì)發(fā)生，因?yàn)闉g覽器試圖避免水平滾動(dòng)。不過，在我的例子中，我想要水平滾動(dòng)。

有什么想法嗎？

看看空白屬性，如下所示:

th {
    white-space: nowrap;
}

這將強(qiáng)制& ltth & gt在一行上顯示。

在鏈接頁面中，以下是空白的各種選項(xiàng):

常態(tài) 該值指示用戶代理折疊空白序列，并根據(jù)需要換行以填充行框。

在…之前 該值防止用戶代理折疊空白序列。僅在保留的換行符處換行。

nowrap 該值與“正常”一樣折疊空白，但不顯示文本中的換行符。

預(yù)包裝 該值防止用戶代理折疊空白序列。在保留的換行符處換行，并根據(jù)需要填充行框。

預(yù)線 該值指示用戶代理折疊空白序列。在保留的換行符處換行，并根據(jù)需要填充行框。

或者

<th style="white-space:nowrap;">

或者

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

至少有兩種方法可以做到:

在“td”標(biāo)記中使用nowrap屬性:

<th nowrap="nowrap">Really long column heading</th>

在單詞之間使用不間斷的空格:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

我想到這個(gè)問題需要防止文本在連字符處換行。

我是這樣做的:

<td><nobr>Table Text</nobr></td>

參考:

如何在所有瀏覽器中防止連字符換行

https://caniuse.com/?搜索=nobr

如果您想知道在React中構(gòu)建時(shí)這是如何為材質(zhì)UI工作的，下面是如何將它添加到您的& ltTableHead & gt組件:

<TableHead style={{ whiteSpace: 'nowrap'}}>