td word wrap in all browsers

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
cjkeane
Forum Contributor
Posts: 214
Joined: Fri Jun 11, 2010 1:17 pm

td word wrap in all browsers

Post by cjkeane »

Hi everyone:
I've searched the net for quite a while but haven't found a solution to my issue so I thought I'd post my coding here to see if anyone could recommend a solution.

I need text to wrap within a cell, but I've found that some text goes outside the line and does not wrap. Any help would be appreciated. Thanks.

the css I use is:
td {
display: table-cell;
}

Then on the table and cell, I use:

Code: Select all

echo "<table cellpadding='10' width='900' style='border-collapse:collapse;table-layout:fixed'>"
echo '<td valign="top" style="white-space:pre-wrap;white-space:-moz-pre-wrap !important;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;word-break:normal; width:99%; overflow-x:auto;">' . $result['description'] . '</td>';
pbs
Forum Contributor
Posts: 230
Joined: Fri Nov 07, 2008 5:31 am
Location: Nashik, India
Contact:

Re: td word wrap in all browsers

Post by pbs »

use PHP wordwrap() function instead

Code: Select all

e.g.
$newtext = wordwrap($text, 20, "<br />\n");
cjkeane
Forum Contributor
Posts: 214
Joined: Fri Jun 11, 2010 1:17 pm

Re: td word wrap in all browsers

Post by cjkeane »

so you think i should replace all of this: style="white-space:pre-wrap;white-space:-moz-pre-wrap !important;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;word-break:normal; width:99%; overflow-x:auto;" with just the php wordwrap?
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: td word wrap in all browsers

Post by Celauran »

No. That wraps a string at a fixed number of characters which is not only unhelpful for variable width fonts, but not great for responsive either. Can you show an example of the problem on JSFiddle or Codepen or something?
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: td word wrap in all browsers

Post by Celauran »

Also, isn't there a <tr> missing in there?
cjkeane
Forum Contributor
Posts: 214
Joined: Fri Jun 11, 2010 1:17 pm

Re: td word wrap in all browsers

Post by cjkeane »

i only gave you the lines of code which i was inquiring about. i just omitted the tr's
Post Reply