切文本与PHP或jQuery的/ HTML/CSS

<table id="tab"> 
    <tr><td>....</td><td>2222</td></tr> 
    <tr><td>@@@@</td><td>4444</td></tr> 
</table> 

#tab td { 
    border: solid 1px red; 
    max-width: 50px; 
}

活生生的例子：http://jsfiddle.net/mCxqD/切文本与PHP或jQuery的/ HTML/CSS

我想在TD剪切文本，如果他是太长。我可以使用strlen和SUBSTR，但：

的strlen（....）= 4; strlen（@@@@）= 4;

和在表占据不同的空间量。

如何是最好的方法？我没有换行到新行。我想出头：http://jsfiddle.net/mCxqD/1/

编辑： 溢出：隐藏是好的，但如果我想补充溢出文字例如“*”是什么？ http://jsfiddle.net/7ksD7/2/

来源

2011-10-20 Paul Attuck

这是一个有点迂回的（和使用jQuery ...尽管你可以做到这一点与普通JS很轻松了），但你可以尝试使用JS包装在span标记文本，并测量它，而对比较最大宽度。您可能需要调整一些东西（例如 - 确保您补偿用于表示截止的字符的宽度），但我认为这应该起作用（如果您没有可用的文本溢出）：

$(document).ready(function() { 
    $('td').each(function() { 
     var contents = $(this).html(); 
     var max_width = $(this).css('max-width').replace('px', ''); 
     var cut_char = '*'; 

     $(this).html(''); 
     $(this).append('<span>' + contents + '</span>'); 
     var $span = $(this).find('span:first'); 

     var content_width = $span.innerWidth(); 

     while (content_width > max_width) { 
      var str = $span.html(); 
      $span.html(str.substring(0, str.length - 1)); 

      content_width = $span.innerWidth(); 

      if (content_width < max_width) { 
       $span.html(str.substring(0, str.length - 2) + cut_char); 
      } 
     } 
    }); 
});

这是你的小提琴更新： http://jsfiddle.net/mCxqD/6/

来源

2011-10-20 18:15:00

非常感谢:)这是非常好的 –

添加overflow: hidden。

演示：http://jsfiddle.net/7ksD7/

来源

2011-10-20 09:51:29 JJJ

+1，谢谢你，但是如果我想什么增加对例如“8”溢出文字？ –

我不确定你的意思。你能举个例子吗？ – JJJ

是：http://jsfiddle.net/7ksD7/2/ –

我觉得你最好的选择是文本overflow属性 -

#tab td { 
    border: solid 1px red; 
    max-width: 50px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis; 
}

看到http://jsfiddle.net/7ksD7/5/

见more here大致相同 - 尽管这文章说，财产是FF不支持，至少我的浏览器（FF 7）似乎支持它。

来源

2011-10-20 10:04:08 VinayC

这太神奇了:)非常可惜，在所有浏览器中都不能正常工作 –

切文本与PHP或jQuery的/ HTML/CSS

回答

相关问题