javascript - 省略 yui 数据表中的文本

Question

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

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

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

Answer 1

我想出了这个主意。该脚本将测量 div 的内容，如果它的宽度高于 div 的宽度，它会将内容缩小一点，所以 ellipsis char 可以容纳，并放置 ellipsis char:

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