html tables with word wrap?

When I have a table with a very long string inside, IE expands the table and Firefox makes the text overflow. To remedy to that there is a proprietary style for IE, "word-wrap" to wrap the string onto the next line. This doesn't work in Firefox. The best alternative I found was to hide the extra text with the "overflow:hidden" style, which I'm using temporarily while looking for a way to wrap it. So the question is: is there a way to word wrap in Firefox, or have I already done as much as could be done? The words are single long words without spaces like veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeryloooooooooooooooongwoooooooooooord and they come from a database, so I don't have control on what could appear.

Public Comments

  1. can you use a <BR> to break up the line of text instead of using the word-wrap at all. Remember Firefox and IE are not the only browsers out there.
  2. i don't have firefox so i'm only guessing here. try this <style type="text/css"> td { white-space:normal; } </style>
  3. Since this is coming from the database and it's a very long word entered by a user you probably won't be able to "wrap" it in the element. If you set widths for the element, IE will expand the element and firefox will have the text overlap the element. You could truncate the word or phrase returned to a number of characters either when you pull it from the database or when you display it on the page. In MS SQL it's LEFT ( character_expression , integer_expression ) so LEFT (columName, 15) would give you 15 characters of the contents within ColumnName (You could also limit the entry of the column to 15 characters) OR you can use your scripting language to do the same thing. then use an if statement to see if the characters in columnName value is more than 15 characters. some pseudo code here: if characters in columName > 15 { output '...'; } so you get ThisIsVeryLongW... If your long words are in the middle of a phrase and you can't truncate the whole phrase, it's going to be more difficult to make it fit. You might want to consider changing the design. ------------- edit ------------ In CSS3, there is word-wrap:break-word which might help but I'm not sure of the support There is also the tag <wbr> and & shy; which might help as well if you can calculate where to put them.
  4. Or use the WIDTH property of the TABLE tag to fix the width of the table. Text will flow automatically, surely?
Powered by Yahoo! Answers