Question

嘿，我正在寻找一种在yui数据表中删除文本的好方法。我的意思是，格式化文本，以便它很好地适应其单元格，并有一个椭圆（...）尾随它，如果文本必须被截断。

我想在不使用CSS选择器的情况下这样做，因为我有一个大型数据集并且按类名选择每个单元格会很昂贵。

有关如何使用格式化程序或类似内容的任何好建议。

Answer 1

我想出了这个主意。该脚本将测量div的内容，如果它的宽度高于div的宽度，它将缩小内容一点点，因此省略号char可以适合，并将省略号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;

对yui数据表中的文本进行椭圆化处理

1 个答案: