首页 文章

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

提问于
浏览 次
242

有谁知道如何防止表格单元格中的文本被包装？这是针对表的 Headers ， Headers 比它下面的数据长很多，但我需要它只显示在一行上 . 如果色谱柱很宽，也没关系 .

我（简化）表的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>

Headers 本身包含在 th 标记内的div中，原因与页面上的javascript有关 .

table 出来的 Headers 包裹在多条线上 . 这似乎只发生在表足够宽时，因为浏览器试图避免水平滚动 . 但就我而言，我想要水平滚动 .

有任何想法吗？

html css

4 回答

  • 4

    我遇到了这个问题，需要阻止连字符处的文本换行 .

    这就是我做的方式：

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

    参考：

    How to prevent line break at hyphens on all browsers

    回复于
  • 413
    <th nowrap="nowrap">

    要么

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

    要么

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

    看看white-space属性，使用如下：

    th {
    white-space: nowrap;
}

    这将强制 <th> 的内容显示在一行上 .

    从链接页面，以下是 white-space 的各种选项：

    normal此值指示用户代理折叠空白序列，并根据需要断行以填充行框 . pre此值可防止用户代理折叠空白序列 . 仅在保留的换行符处中断行 . nowrap此值会折叠白色空间，与“normal”相同，但会抑制文本中的换行符 . pre-wrap此值可防止用户代理折叠空白序列 . 在保留的换行符处打破行，并根据需要填充行框 . pre-line此值指示用户代理折叠空白序列 . 在保留的换行符处打破行，并根据需要填充行框 .

    回复于
  • 57

    至少有两种方法可以做到：

    在“td”标记内使用nowrap属性：

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

    在你的单词之间使用不可破坏的空格：

    <th>Really&nbsp;long&nbsp;column&nbsp;heading</th>
    回复于

相关问题