表格列內的Wordwrap文本

我得到一個表格，其中一列包含大量內容。表格列內的Wordwrap文本

我想限制表的大小爲550px，試圖設置URL列200px，並使網址wordwrap - 但它不是玩。

用我的頭抨擊我的桌子。這裏是摘錄。

<html> 
<head> 
    <title>Foo</title> 
    <style> 
     .data-table td.topic { 
      word-wrap: break-word; 
      display: block; 
      text-align: left; 
      font-size: 14px; 
      border: 1px solid blue; 
      width: 200px; 
     } 
     .data-table { 
      border: 1px solid red; 
      width: 550px; 
     } 
    </style> 
</head> 
<body> 

<div class="data-table"> 
    <table border="0" cellspacing="0" cellpadding="0" style=""> 
     <thead> 
      <tr> 
       <th>URL</th> 
       <th class="center-text" style="width:80px;">Status Code</th> 
       <th class="center-text" style="width:95px;">Time</th> 
       <th class="center-text" style="width:75px;">Link In</th> 
       <th class="center-text" style="width:75px;">Links Out</th> 
      </tr> 
     </thead> 
     <tbody> 

      <tr class=""> 
       <td class="topic"> 
        <a href="http://2.bp.xxxxxxxxxx.com/_n55gYT_sn0o/TGUybwgn6mI/AAAAAAAAAMQ/q4iOiN8yE4Y/s1600/xxxxxxxxxxxx+nutrition.jpg" title="http://2.bp.xxxxxxxx.com/_n55gYT_sn0o/TGUybwgn6mI/AAAAAAAAAMQ/q4iOiN8yE4Y/s1600/xxxxxxxxxx+nutrition.jpg" target="_blank"><b>http://2.bp.xxxxxxx.com/_n55gYT_sn0o/TGUybwgn6mI/AAAAAAAAAMQ/q4iOiN8yE4Y/s1600/xxxxxxxxxx+nutrition.jpg</b></a> 
       </td> 
       <td class="center-text">200</td> 
       <td class="center-text">1.01</td> 
       <td class="center-text"><a class="link_report" href="/link/report/to/91809/26">1</a></td> 
       <td><a class="link_report" rel="urls_for_91809" href="/link/report/from/91809/26">0</a></td> 
      </tr> 
      <tr> 
       <td colspan="5" id="urls_for_91809" style="padding:0px; border-bottom:0px"></td> 
      </tr> 

     </tbody> 
    </table> 
</div> 

</body> 
</html>

來源

2011-05-24 Wizzard

這個代碼[如上面粘貼（http://jsfiddle.net/clairesuzy/v6x7Q/）被打破了我的長鏈接罰款，有什麼問題呢？ – clairesuzy 2011-05-24 09:42:44

它似乎對我有用 - word-wrap：break-word是一個CSS3屬性，你使用CSS3兼容的瀏覽器來測試嗎？ – Codecraft 2011-05-24 09:46:05

FF3.6似乎很好，Safari5和Chrome10似乎不喜歡它。其他解決方案？ – Wizzard 2011-05-24 10:01:03

您是否需要顯示整個URL？

如果沒有，你可以使用一些jQuery來縮短它。

var links = $("td.topic a").get(); 
var bigLinks = []; 
var smallLinks = []; 

$("td.topic a").each(function(){ 
    bigLinks.push($(this).text()) 
}); 

for(var i=0; i<bigLinks.length; i++){ 
    smallLinks[i] = bigLinks[i].slice(0,27); 
    $(links[i]).text(smallLinks[i] + "..."); 
}

http://jsfiddle.net/G2PsZ/1/

據透露...切片是任意的。您根據您製作table cell的大小設置字符數。

所有這些都會替換a標籤中的文字，使其更短。鏈接保持不變。

來源

2011-05-24 12:58:09

可以幫助我在這個http://stackoverflow.com/questions/6098224/how-to-set-blur-screen-to-full-page-and-at-click-page-go-to-top – 2011-05-24 13:59:53

表格列內的Wordwrap文本

回答

相關問題