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

Question

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

5

我在尝试让表格单元格水平滚动时遇到了困难。这是我目前所拥有的：

<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
 }

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

谢谢

- Pablo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- m59 · Accepted Answer

你缺少样式规则结尾的分号;。此外，添加white-space: nowrap以使所有内容保持在一行并继续向右。

实时演示（单击）。

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

在我的演示中，我将height改为40px。 20px太小了，看不清文本。你可能不需要overflow-y。