在IE11中，使用overflow-x: hidden会创建垂直滚动条。

Question

在Chrome中，我对表格的td元素设置了overflow-x: hidden属性。当单元格内容超过单元格时，其余内容将被隐藏。但是当我在IE11中测试时，单元格的内容被隐藏；然而，出现了一个不好看的垂直滚动条，我不知道为什么会这样。下面是它的样子：

如果我在开发工具中取消选中该属性，则垂直滚动条消失，但是内容会溢出到行中。有没有什么方法可以解决这个问题？

- SQL and Java Learner

---

请尝试这个：https://dev59.com/y2w05IYBdhLWcg3wcRUj - Jeisson Huerfano

这些建议都没有起作用。 - SQL and Java Learner

你尝试同时指定 overflow-y: hidden 吗？ - Pierre Burton

是的，我也尝试过那个。 - SQL and Java Learner

Answer 1

好的，既然您想隐藏单元格内容，当超出单元格空间时，您应该尝试使用类似于文本溢出的东西：

<table class="custom">
  <tr>
    <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
  </tr>
    <tr>
    <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
  </tr>
</talble>

还有CSS：

.custom td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

参考资料

- Jeisson Huerfano