Question

我有一张桌子，其中一列包含很多内容。

我试图将表的大小限制为550px，尝试将url列设置为200px并使url 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>

Answer 1

您需要显示整个网址吗？

如果没有，你可以使用一些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/

Fyi ......切片是任意的。您可以根据table cell的大小来设置字符数。

所有这一切都取代a标签中的文字，使其更短。链接保持不变。

在表列内的Wordwrap文本

1 个答案: