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

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以便所有内容都保留在一行上并继续向右。

现场演示（点击）。

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

在我的演示中，我height将40px. 20px似乎小看文字。你可能不需要overflow-y.