html - 如何使文本水平溢出(保持在同一行)

Question

我在使表格单元格水平滚动时遇到问题。这是我到目前为止所拥有的

<tbody>
  <tr>
    <td>01/01/14</td>
    <td>
      <div class="scroll">
        A really long text that will overflow horizontally
      </div>
    </td>
  </tr>
</tbody>

和滚动 css

.scroll{ 
    height: 20px
    max-width: 500px
    overflow-x: scroll
    overflow-y: hidden
 }

现在无论我尝试什么，单元格都不会水平溢出。它垂直但不是我想要的。任何想法为什么这不起作用？

谢谢

Answer 1

您缺少分号 ;在你的风格规则的最后。另外，添加 white-space: nowrap这样一切都将保持在一条线上并继续向右。

Live demo (click).

.scroll { 
    height: 20px;
    max-width: 500px;
    overflow-x: scroll;
    white-space: nowrap;
 }

在我的演示中，我更改了 height至 40px . 20px似乎小看文字。您可能不需要 overflow-y .