在yui数据表中省略文本 [英] ellipsifying the text in a yui datatable

问题描述

我正在寻找一种在yui datatable中省略文本的好方法。我的意思是，格式化文本，以便它很好地适合其单元格，并且如果文本必须被截断，并且具有一个椭圆（...）。

我想这样做是为了使用CSS选择器，因为我有一个大的数据集，并且按类名选择每个单元格将是昂贵的。

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

解决方案

我想出了这个想法。脚本将测量div的内容，如果它的宽度大于div的宽度，它会缩小内容一点，所以省略号的char可以适合，并将省略号char：

 < style> 
 div {
 width：100px; 
 height：1em; 
 overflow：hidden; 
 white-space：nowrap; 
} 
< / style> 
< div>短文本< / div> 
< div>非常长的文本。< / 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的所有变体列表：省略号，其中许多不起作用。在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; 
  

hey I'm looking for a good way to ellipsify text in a yui datatable. By that I mean, formatting the text so that it fits nicely into its cell and has an ellipse (...) trailing it if the text had to be truncated.

I want to do this wihtout the use of CSS selectors, because I have a large dataset and selecting each cell by classname would be expensive.

Any good suggestions on how to do this using a formatter or something similar.

解决方案

I came up with this idea. The script will measure the content of div and if its width is above div's width, it will shrink the content a little bit, so ellipsis char could fit, and put 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>

I didn't use YUI in this example, I hardly know this library. I'm sure this code could be written much simpler by avoiding all of these DOM methods and using YUI's substitutes.

Disadvantage: the script roughly cuts a letter at the end, which looks not so nice. But measuring width of the content letter by letter, or even in logarithmic manner, costs too much time. For now this is my best idea.

Solution: Use text-overflow: ellipsis in browsers that support this and script in others.

List of all variants of text-overflow: ellipsis, many of these are not working yet. Tested with success in 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数据表中省略文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！