Screenshot

Important Note : This application does not support Internet Explorer. I will be happy with solution which will work in Chrome and Firefox.

I am using dynamic code (velocity-spring) for generating an html-table. Number of columns are not fixed (so I cannot specify width for headings). The second column values are always a link. Structure like this :

<table>
<tr>    
    <th ALIGN=CENTER> heading 1 </th>
    <th ALIGN=CENTER> heading 2 </th>
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th>
</tr>
<tr ALIGN=CENTER>    
    <td ALIGN=CENTER> value 1 </td>
    <td ALIGN=CENTER> <a href="mypage.html">value 2</a> </td> <!-- this column is a link -->
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td>
</tr>
.... now more rows followed
</table>

Now problem is that if the second column (with hyperlink) contains a "loooooooooooooooooooooooong" value (without spaces) the other columns are wrapping their text. Please help me with css/jQuery/Javascript code, so that I maintain the structure of table with whatever values e from back-end.

UPDATE:

After getting answer, I updated my table code like below (as they say specify width and use word-break) :

<table>
<tr>    
    <th ALIGN=CENTER> heading 1 </th>
    <th style="word-wrap:break-word; width: 200px;" ALIGN=CENTER> heading 2 </th>
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th>
</tr>
<tr ALIGN=CENTER>    
    <td ALIGN=CENTER> value 1 </td>
    <td ALIGN=CENTER style="word-wrap:break-word; width: 200px;"> <a href="mypage.html">value 2</a> </td> <!-- this column is a link -->
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td>
</tr>
.... now more rows followed
</table>

I know I need to accept and vote up usefull answers, doing. But please help me. I cant send you live URL. Attaching screen shots very soon.

Screenshot

Screenshot

Important Note : This application does not support Internet Explorer. I will be happy with solution which will work in Chrome and Firefox.

I am using dynamic code (velocity-spring) for generating an html-table. Number of columns are not fixed (so I cannot specify width for headings). The second column values are always a link. Structure like this :

<table>
<tr>    
    <th ALIGN=CENTER> heading 1 </th>
    <th ALIGN=CENTER> heading 2 </th>
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th>
</tr>
<tr ALIGN=CENTER>    
    <td ALIGN=CENTER> value 1 </td>
    <td ALIGN=CENTER> <a href="mypage.html">value 2</a> </td> <!-- this column is a link -->
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td>
</tr>
.... now more rows followed
</table>

Now problem is that if the second column (with hyperlink) contains a "loooooooooooooooooooooooong" value (without spaces) the other columns are wrapping their text. Please help me with css/jQuery/Javascript code, so that I maintain the structure of table with whatever values e from back-end.

UPDATE:

After getting answer, I updated my table code like below (as they say specify width and use word-break) :

<table>
<tr>    
    <th ALIGN=CENTER> heading 1 </th>
    <th style="word-wrap:break-word; width: 200px;" ALIGN=CENTER> heading 2 </th>
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th>
</tr>
<tr ALIGN=CENTER>    
    <td ALIGN=CENTER> value 1 </td>
    <td ALIGN=CENTER style="word-wrap:break-word; width: 200px;"> <a href="mypage.html">value 2</a> </td> <!-- this column is a link -->
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td>
</tr>
.... now more rows followed
</table>

I know I need to accept and vote up usefull answers, doing. But please help me. I cant send you live URL. Attaching screen shots very soon.

Screenshot

• javascript
• jquery
• html
• css

3 Answers 3

word-wrap will work but you need to specify a width for the column.

Try to use the CSS attribute "word-wrap."

table td a
{
    word-wrap: break-word;
}

This is supported in all major browsers and should fix your problem.

You can see a test case I created here. You don't need to specify a width for the element, it will work without (resize the result window to see.)

table td a {
    // set a width
    word-wrap: break-word
}

The 'word-wrap' solution only works in IE and browsers supporting CSS3.

The best cross browser solution is to use script language (javascript or whatever) to locate long strings and place inside them in regular intervals the html entity #8203; This entity breaks the long words nicely, and works on all browsers.

A nice regular expression should be:

 "everyverylongword".replace(/([^\s-]{5})([^\s-]{5})/,"$1­$2")