切文本與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

回答

相關問題