Question

我有一张桌子，里面有多个单元格。我需要截断包含内容的单元格。

我已经使用CSS省略号来实现这一点并且工作正常。

现在的问题是，正如我们所知，css省略号与IE7不兼容所以我需要让它适用于IE7。

你可以为任何javascript解决方案提供帮助。

谢谢！

这是我目前的解决方案

td{
  background:#cccc33;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
  max-width: 20px;
  overflow: hidden;
}

DEMO

重新调整浏览器宽度以查看省略号

Answer 1

您可以尝试这样的事情：

var str = 'Hello world', out;

if(str.length > 2) {
  out = str.substring(0, 2).concat('...');
}

这会导致他...... 您还可以使用类似modernizr的东西来检测是否支持文本溢出来决定使用JS还是css

Answer 2

<强>更新：

在这里： DEMO

$('td').each(function(){
    $(this).data('firstText',$(this).html());
});
$(window).resize(function(){
    var width,
        allowedChar,
        maxChar;
    $('td').each(function(){
        if($(this).width()<=38){
            var value=$(this).html();
            $('td:last').after('<td class="test">a</td>');
            $('.test').css('width','auto');
            width=$('.test').width();
            $('.test').remove();
            maxChar=Math.floor(20/width);
            if($(this).html().length>maxChar+3){
                allowedChar=Math.floor($(this).width()/width);
                allowedChar-=3;
                $(this).html($(this).html().substring(0, allowedChar).concat('...'));
            }
        }
        else{
            $(this).html($(this).data('firstText'));
        }
    });
});

基于宽度的表格单元格截断

2 个答案: