问题描述
|
我有一张桌子,其中一列包含很多内容。
我试图将表的大小限制为550px,尝试将url列设置为200px并进行url自动换行-但它没有播放。
用我的头砸桌子。
这是片段。
<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>
解决方法
您需要显示整个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/
费...切片是任意的。您可以根据make2的大小来设置字符数。
所有这些操作就是替换a
标记中的文本,使其更短。链接保持不变。