如何使文本水平溢出（保持在同一行）

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。