省略 yui 数据表中的文本

嘿，我正在寻找一种在 yui 数据表中省略文本的好方法。我的意思是，格式化文本，使其能够很好地适合其单元格，并且如果文本必须被截断，则在其后面有一个椭圆 (...)。

我想在不使用 CSS 选择器的情况下执行此操作，因为我有一个很大的数据集，并且按类名选择每个单元格的成本会很高。

关于如何使用格式化程序或类似工具执行此操作的任何好的建议。

我想出了这个主意。该脚本将测量 div 的内容，如果其宽度高于 div 的宽度，它将稍微缩小内容，以便省略号字符可以容纳，并放置省略号字符：

<style>
div {
    width: 100px;
    height: 1em;
    overflow: hidden;
    white-space: nowrap;
}
</style>
<div>Short text.</div>
<div>Extremely long text.</div>
<script>
(function () {
    var list = document.getElementsByTagName('div');
    for (var i = 0; i < list.length; i++) {
        var spanElement = document.createElement('span');
        while (list[i].childNodes.length)
            spanElement.appendChild(list[i].firstChild);
        list[i].appendChild(spanElement);
        if (list[i].firstChild.offsetWidth > list[i].offsetWidth) {
            var ellipsisSpanElement = document.createElement('span');
            ellipsisSpanElement.appendChild(document.createTextNode('…'));
            list[i].appendChild(ellipsisSpanElement);
            var newWidth = list[i].offsetWidth - ellipsisSpanElement.offsetWidth;
            list[i].firstChild.setAttribute('style',
                'overflow: hidden; white-space: nowrap; display: block; float: left; width: ' + newWidth + 'px');
        }
    }
})();
</script>

我在这个例子中没有使用YUI，我几乎不知道这个库。我确信通过避免所有这些 DOM 方法并使用 YUI 的替代方法，这段代码可以写得更简单。

缺点：剧本最后粗略地剪掉了一个字母，看起来不太好看。但是逐个字母、甚至以对数方式测量内容的宽度会花费太多时间。目前这是我最好的主意。

解决方案：使用text-overflow: ellipsis在支持此功能的浏览器中，并在其他浏览器中使用脚本。

所有变体的列表text-overflow: ellipsis，其中许多还没有发挥作用。在 IE 8.0、Opera、Chrome 中测试成功。

text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;