表格列内的自动换行文字
|
我有一张桌子，其中一列包含很多内容。
我试图将表的大小限制为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>
没有找到相关结果
已邀请:
1 个回复
裸雷胜檀哭
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] + \"...\"); }标记中的文本，使其更短。链接保持不变。