在yui數據表中橢圓化文本

Question

嘿，我正在尋找一種在yui數據表中橢圓化文本的好方法。我的意思是，格式化文本，以便它很好地適應它的單元格，並且如果文本必須被截斷，則會有一個橢圓形（...）。

我想這樣做沒有使用CSS選擇器，因爲我有一個大的數據集，並通過classname選擇每個單元格將是昂貴的。

有關如何使用格式化程序或類似方法執行此操作的任何好建議。

Answer 1

我想出了這個想法。該腳本將測量的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。

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;