How To Wrap Text in a Table Cell (May 5th, 2005)

An interesting question that came up today during work was how to wrap text in a table cell that does not contain any line breaks or spaces. For example:

ThisIsCell1 ThisIsCell2

We want the text inside the cells to wrap to the next line instead of extending the table size. There are three basic solutions:

1. CSS – Internet Explorer Specific.

In Internet Explorer, there is a custom CSS extension called “word-wrap” which when set as “word-wrap: break-word;” will do just what we want. For example (only in IE):

ThisIsCell1 ThisIsCell2

2. CSS3 (no browsers yet).

In CSS 3 a new option called “wrap-option” is defined which when set as “wrap-option: emergency;” will do the same. Unfortunatly no browser today (except maybe Safari) supports it yet. The following example will only work in a CSS 3 browser (none of which I have):

ThisIsCell1 ThisIsCell2

3. JavaScript (all browsers).

Another solution would be to use JavaScript to break up the text into specific sized chunks. The downside of this approach is that you have to figure out what the chunk size would be. A good example of a JavaScript can be found here. I slightly modified it as follows:

strbuff='ThisIsCell1';
    newstr='';
    startI = 0;
    max=2;
    str='';
    subarr=new Array(parseInt(strbuff.length/max+1));
    for (i=0;i    {
       subarr[i]=strbuff.substr(startI,max);
       startI+=max;
    }
    for (i=0;i    {
       newstr+=subarr[i]+'';
    }
    str+=subarr[subarr.length-1];
    document.write(newstr);
 } else {
 	document.write(strbuff);
 }

There is also a fourth way to do it via XSLT as described in Jeni Tennison’s book but I don’t have the time to get to that today. I will try to post a followup tomorrow.

UPDATE: Here is the followup post.

Advertisements

Comments?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s