如何防止表格单元格中的文字换行

html CSS

泡芙

2020-03-24

有谁知道我如何防止表格单元格中的文本换行?这是用于表头的,其标题比其下的数据长很多,但是我只需要在一行上显示即可。如果列很宽也可以。

我的(简化的)表的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>

标题本身包装在th标记内的div中,原因与页面上的javascript有关。

该表将标题和多行包装在一起。这似乎仅在表足够宽时才会发生,因为浏览器试图避免水平滚动。不过,就我而言,我想水平滚动。

有任何想法吗?

第3154篇《如何防止表格单元格中的文字换行》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Gil伽罗小宇宙 2020.03.24

我遇到这个问题,需要防止在连字符处换行。

这是我的方法:

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

参考:

如何在所有浏览器上防止连字符出现换行

Tom凯 2020.03.24
<th nowrap="nowrap">

要么

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

要么

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

至少有两种方法可以做到这一点:

在“ td”标签内使用nowrap属性:

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

在单词之间使用不易破损的空格:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android