Question

我的一个表（html表元素）单元格中有一个大的URL（没有空格），它调整了表的大小。我不想调整表的大小，我应该设置什么属性来将URL分解为新行？

HTML

<table class="ui-grid" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
    <caption>Statistic (Last 50 conversions)</caption>
    <tbody><tr>
        <th scope="col">Date</th>
            <th scope="col">Result</th>
            <th scope="col">Api</th>
            <th scope="col">IP</th>
            <th scope="col">Source</th>
    </tr><tr>
        <td style="width:200px;">12/16/2011 3:23:59 PM</td>
        <td align="center" style="width:50px;">True</td>
        <td align="center" style="width:100px;">Web2Pdf</td>
        <td align="center" style="width:100px;">::1</td>
        <td style="width:200px;">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.html?i_url=http%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-c&amp;i_name=Patriots%20%20vs%20Redskins&amp;i_venue_name=Gillette%20Stadium%20&amp;i_venue_address=Foxborough%20%2C%20MA&amp;d_Score_0=34&amp;d_Score_1=27&amp;d_Period_0=Final&amp;p_name_0=Patriots%20&amp;p_name_1=Redskins</td>
    </tr>   
    </tbody></table>

CSS

.ui-grid { width: 100%; margin: 5px 0 10px 0; border: solid 1px #eeeeee; border-collapse: collapse; }
.ui-grid td { padding: 2px; border: solid 1px #eeeeee; }
.ui-grid td b { font-weight: bold; }
.ui-grid th { padding: 4px 2px; color: #fff; background: #000000; border-left: solid 1px #eeeeee; text-align: center; }
.ui-grid .alt { background: #fcfcfc; }
.ui-grid .pgr { background: #424242; }
.ui-grid .pgr table { margin: 5px 0; }
.ui-grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.ui-grid .pgr a { color: #666; text-decoration: none; }
.ui-grid .pgr a:hover { color: #000; text-decoration: none; }

Answer 1

将以下内容添加到您的css

table-layout:fixed
word-wrap:break-word

以下网站对此进行了详细介绍 http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

我修改了你的代码，这对我有用，希望它能帮到你

 <html>    
<div id="wrap">
        <div id="content-primary">
<table class="table" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
            <caption>
                Statistic (Last 50 conversions)
            </caption><tbody>
        <tr>
                    <th scope="col">Date</th><th scope="col">Result</th><th scope="col">Api</th><th             scope="col">IP</th><th scope="col">Source</th>
                </tr>
        <tr>
                <td style="width:100px">12/16/2011 3:23:59 PM</td><td align="center"                                style="width:50px;">True</td>
        <td style="width:100px">Web2Pdf</td>
        <td style="width:100px">::1</td>
        <td style="width:100px">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.htmli_url=ht%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-%20%2C%20MA&amp;d_Score_0=34&amp;d_Score_1=27&amp;d_Period_0=Final&amp;p_name_0=Patriots%20&amp;p_name_1=Redskins</td>
            </tr>   
        </tbody></table>
</div>
</div>


</html>

    <style type="text/css" media="screen,print,projection">
    @import '/css/lab.css';
#wrap {
    width:60em;
    margin:2em auto;
}
#content-primary {
    float:left;
    width:60%;
}
#content-secondary {
    float:right;
    width:36%;
}
table {
    width:100%;
    border:1px solid #f00;
    word-wrap:break-word;
}
th,
td {
    vertical-align:top;
    text-align:left;
}
    </style>

Answer 2

您可以尝试以下几种方法：

添加CSS3属性word-wrap: break-word;
您可以在表格单元格中放置一个div。该div中的任何内容都不会延伸到表格单元格。
max-width css property

Answer 3

最实用的方法是在每个可接受的断点之后添加标记<wbr>，例如“/”，“？”和“＆amp;”（也可能是“=”）。从早期开始，这个标签就得到了浏览器的支持。它没有包含在任何HTML规范中（虽然它建议在HTML5中标准化），但它几乎总是有效并且没有明显的缺点。

由于这是关于文本中的URL，因此中断应出现在自然的分割点，而不是任意的。各种风格指南（如芝加哥风格手册）都有自己的建议，但上面提到的简单断点规则应该在所有账户上都可以接受，通常就足够了。

word division in HTML and related matters上的页面上有更多信息。

Answer 4

将div内的td内的网址包围。将word-wrap:break-word; width:200px应用于div容器。 div容器是IE的好处。例如，在Chrome中，样式可以直接应用于td。

word-wrap是非标准的，但是它具有出色的浏览器支持，包括IE6 +。

这是example fiddle。

不要调整表格单元格的大小

4 个答案: