Text wrapping within a td

Debbie-Leigh

Hi,

I have a problem with text wrapping within a td that and I can't seem to find a solution in any of the posts here.

The text that I need to put into the td can potentially be long with no whitespace. Sometimes it may have whitespace and sometimes not, there's no way of knowing in advance. If it has no whitespace then it pushes the td width out for the full width of the text which breaks my site.

I have found the CSS attribute "table-layout: fixed" and have used it on the outer table of my site so the overall site doesn't break, but it doesn't work on the td in the inner table that contains the text. So that td still gets pushed out until it reaches the edge of the site when the remainder of the text just disappears and there's no scroll bar to use either.

Does anyone know of a way to tell a browser to wrap the text at the specified width of the td regardless of whether there's any whitespace? I'd rather not resort to fiddling with the text in a script, but just let the browser do it.

Debbie-Leigh

drew010

you can use the php function wordwrap to fix the text and then put it in the td. if the information is retrieved from a database or a form post you can do something like this:

$wrapped = wordwrap($longString, 35, "<br>\n", 1);

$longString is the string that needs to be wrapped.
35 is the number of characters to wrap at
<br>\n is the data to put after the 35th character
1 is a boolean that tells the function to wrap at 35 even if it
must cut the word

see http://php.net/wordwrap for more details.

hope that helped.

bowchow79

Setting the "width" of a table to a set ammount generally works for me, but sometimes it doesn't, and I can't figure out why. Even with explicit CSS width settings, tables, etc nothing seems to work. Try using some CSS style attributes and seeing if that helps - a good introduction is at http://www.pageresource.com/dhtml/csstut6.htm, if you need it.

In addition to the wordwrap function, you could also use the function nl2br(), which takes all new line characters in a string and replaces them with <br /> - it helped me when I ran into a similar problem retrieving articles from a database that rely on a combination of newlines and word wrap to accomplish formating. I'm sure there are similar functions for tabs and other whitespace, or you could probably code your own. Hope the ideas here help a bit.

yuraupt

Try to insert <wbr> (word break tag) somewhere inside your text. Like each 35th position.

Debbie-Leigh

Hi,

Thanks for all your suggestions. I've been playing around with some of them and various css settings because, as I said, I'd rather find a non-scripting solution if possible.

Well, I think I've found a way to do it.

What I'm using is a combination of wrapping the cell contents in another table which uses the css properties: table-layout :fixed, width :100% and word-wrap :break-word.

This works in IE and (sort of) in NS. The first 2 make it work in NS - the tables don't break, but it doesn't do the wrapping properly like IE does. While IE does do everything properly, NS seems to make the text float over everything to the right of the cell.

So if anyone knows of a way to tell NS to not float the text, but to just truncate it or wrap it properly, then I think we'll have a complete solution to the lack of a wrapping function in HTML. Judging by the amount of frustration in this area in other posts, I think this would be a godsend don't you?

Debbie-Leigh

drew010

the problem with using css and certain javascript, is that the way it is handled varies with IE, netscape, mozilla, opera and the countless other browsers. until css does the exact same thing in all browsers its best not to depend on it 100% for your solutions.

yuraupt

server side PHP solution looks better then... as for me

Debbie-Leigh

Hi,

I've now found a way to stop the floating. The "overflow :hidden" css attribute seems to stop it, although it does clip the content. Even though you can use "overflow :scroll", it doesn't seem to produces the expected scrollbars, even in IE6 or NS6.

So even though my solution works with IE, there doesn't seem to be a way to get NS to word wrap properly (yet?), although it does stop the tables from breaking (which is what I was after in the first place, anyway).

So I'm a happy bunny again. 😃

Debbie-Leigh