Home/ Questions/Q 6950917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:09:10+00:00

I have large URL(without spaces) in one of my Table(html table element) cell which

  • 0

I have large URL(without spaces) in one of my Table(html table element) cell which resize table. I do not want to resize table, what property should I set to break URL into new line?

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; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The most practical approach is to add the tag <wbr> after each acceptable break point, such as “/”, “?”, and “&” (maybe also “=”). This tag has been supported by browsers since the early days; it is not included in any HTML specification (though it is proposed to be standardized in HTML5), but it works practically always and has no know drawbacks.

    Since this is about a URL in text, the breaks should appear at natural points of division, not arbitrarily. Various style guides (like The Chicago Manual of Style) have their own recommendations, but the simple break point rules mentioned above should be acceptable on all accounts and normally suffice.

    There’s some more info on my page on word division in HTML and related matters.

    • 0