jqgrid ellipsis

Question

在jqGrid中，如果文本不適合並且被截斷，那麼在列的末尾是否存在本機方式來顯示「...」？

我看到有一個ui-ellipsis類，但我很困惑，如果它被自動添加，如果文本被截斷，並且一旦列的大小被自動消失？

Answer 1

您可以使用下面的CSS

<style type="text/css"> 
    .ui-jqgrid tr.jqgrow td { text-overflow: ellipsis;-o-text-overflow: ellipsis; } 
</style> 

在這種情況下解決這個問題，你將有結果就像下面顯示：

（見here直播）

在其他一些情況下，另一個CSS風格會更好：

<style type="text/css"> 
    .ui-jqgrid tr.jqgrow td { 
     white-space: normal !important; 
     height:auto; 
     vertical-align:middle; 
     padding-top:3px; 
     padding-bottom:3px 
    } 
</style> 

在這種情況下，結果如下：

（見here直播）。

以上兩種設置都是我常用的設置，我常用的取決於客戶的要求。

Answer 2

fit text plugin: 

(function($) { 
     $.fn.fitText = function(options) { 
      options = $.extend({ 
       width: 0, 
       height: 0 
      }, options); 

      $(this).each(function() { 
       var elem = $(this); 
       if (options.height > 0) { 
        while (elem.height() > options.height) { 
         elem.text(elem.text().substring(0, (elem.text().length - 4)) + "..."); 
        } 
       } 
       if (options.width > 0) { 
        while (elem.width() > options.width) { 
         elem.text(elem.text().substring(0, (elem.text().length - 4)) + "..."); 
        } 
       } 
      }); 
     } 
    })(jQuery); 


calling the function: 

    $('.ADHrefUserName').fitText({ width: 200, height: 25 });