如何解决表格列内的自动换行文字
| 我有一张桌子,其中一列包含很多内容。 我试图将表的大小限制为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
标记中的文本,使其更短。链接保持不变。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。