HTML

HTML – Wrap Text in Table Cell

21 Comments

I try to create a table in a Joomla content page but i find that the text will expand the table if it is too long.

The following style can solve the problem.

<style type="text/css">
	td {
		white-space: pre-wrap; /* css-3 */
		white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: -o-pre-wrap; /* Opera 7 */
		word-wrap: break-word; /* Internet Explorer 5.5+ */
	}
</style>

 

The above style will wrap the text in all the <td> tags of a HTML table with style=”table-layout:fixed” as well as defined width in <td> tag.

Unfortunately, The doesn’t work well in Joomla because it will also override the <td> tags of the Joomla content page which leads to the distortion of the layout.

So i have to add the style in each <td> tags just like the below HTML table.

<table width="520" style="table-layout:fixed">
	<tr>
		<td valign="top" width="140">First Name:</td>
		<td valign="top" width="380" style="white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word">Ying Kit</td>
	</tr>
	<tr>
		<td valign="top" width="140">Last Name:</td>
		<td valign="top" width="380" style="white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word">Yuen</td>
	</tr>
</table>

 

Done =)

Reference: Peter Bromberg;s Unblog – FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX

21 thoughts on “HTML – Wrap Text in Table Cell”

  3. Hi,
    I am using af:table (adf component to create a table). I want to wrap text in column (the text populated from database and hence dynamic).

    I tried the same as you mentioned above however that didnt work for me.
    any help.

    Like

    Reply

  6. Hello,
    My requirement: TD width is % based and not fixed. TD height if 20px and should increase by 20 whenever text wrap happens.
    Problem: Since the width is dynamic, the word-wrap: break-word doesnt work. If I use the table-layout:fixed, the height of the TD doesnt increase when the wrap happens.
    Please suggest a solution so that the height should increase to accomodate a newline when text wrap happens.

    Like

    Reply

    1. could you add padding to the HTML element inside TD?

      I think there is no way to change a hardcoded height of a TD tag when a text wrap happens.

      I hope i didn’t mis-interpret your requirement, if i did, i hope you could post an example here so that i could try it by myself.

      Kit

      Like

      Reply

  10. Hi am using Extreme components(ec) table. I want to wrap text in column (the text populated from database and hence dynamic).

    I tried your solution. but it didn’t work for me.. Can you help me please..

    Like

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.