jquery-ui - 调整容器大小时刷新 CSS 省略号

Question

我正在使用 jQuery UI 并设置了一个表格来调整列的大小。

span {      
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

我对单元格应用了一些简单的省略号，以便当它们太小时我得到......

如果我查看页面，它看起来像：

但是，当我调整列的大小时，它不会重新应用省略号:(

有没有一种简单的方法可以做到这一点？我尝试通过使其可见来消除溢出，然后将其重新应用为隐藏，但省略号在渲染时会返回到原始视图。

Answer 1

问题是表格单元格在 CSS 中具有固定宽度：

width: 120px;

然后用 JavaScript 调整大小。当调整大小发生时，单元格中的单元格内容保持相同的宽度。

将 CSS 更改为min-width: 120px;并使用 JavaScript 调整大小width以min-width解决问题。