css - 溢出-x : hidden in IE11 creates vertical scrollbar

Question

在 Chrome 中，我有一个属性 overflow-x: hidden 在表的 td 上。当单元格的内容超出单元格时，其余内容将被隐藏。当我在 IE11 中测试这个时， 的内容被隐藏了；但是，出现了一个讨厌的垂直滚动条，我不确定为什么。这是它的样子:

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

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

reference