表格列内的自动换行文本

发布于 2024-11-09 09:04:22 字数 2345 浏览 0 评论 0原文

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

我试图将表格的大小限制为 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>

原文

I got a table, one of the columns contains a lot of content.

I am trying to restrict the size of the table to 550px, trying to set the url column to 200px and making the url wordwrap - but it's not playing.

Bashing my desk with my head.
Here is snippet.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

芸娘子的小脾气 2024-11-16 09:04:22

您需要显示完整的 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/

仅供参考...切片是任意的。您可以根据表格单元格的大小来设置字符数。

所做的只是替换 a 标记中的文本，使其更短。链接保持不变。

Do you need to show the entire URL?

If not, you could use some jQuery to shorten it.

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... the slice is arbitrary. You set the character count depending on how big you make the table cell.

All this does is replace the text in the a tag, making it shorter. The link remains unchanged.

回复收藏 0 原文

~没有更多了~