HTML TD wrap text

I want to wrap a long line of text in a table for Firefox, IE 6, 7 and 8, Chrome and Opera.
I try ‘style="overflow:hidden; width:50px;’ but the line is cut off.
i.e. I see “longllllllllllllllllllllllllllllllllllllllllllll” but not “longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong”.

<table border="1" cellpadding="2" cellspacing="0" width="600" style='table-layout:fixed'>
    <col width=40>
    <col width=97>

    <tr valign="top">
        <td align="center"><span class="Body2"><a href="index.jsp?ID=21">21<br>(22)</a></span></td>
        <td style="overflow:hidden; width:50px; max-width:50px;"><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br></span><span class="Body2"></span></a></td>
    </tr>
</table>

the only problem i see is that you don’t have a long line of ext there, but a long word expanding more than 50px which is causing all the trouble for you.

in a real world example, you wouldn’t have words that long, and since you have the text in a wrapping <span> element, it should be fine for a normal line of text.

try with <span class=“bodySmall”>longlllllllllllllllllllllllllllllllllllll lllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllll llllllllllllllllllllllllong<br></span> to see what i mean :wink:

I try

<td><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br></span><span class="Body2"></span></a></td>

The problem is that the line does not wrap.
i.e. the whole line extend across the whole table.

again, longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong it’s not a line of text, it’s a big word, unmatched as length in the real world.

for a line of text to wrap, it needs the spaces between words as points to break and wrap the line. you have none in your big word, so that’s the reason it won’t wrap.

but, again :slight_smile: , if you use a real phrase, like

“i should try and use words in the phrase i’d like to wrap, like noonnope is saying”

instead of

“longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong”

you’ll see the wrapping take place :slight_smile: as it should, because <span> is a wrapping content kind of element.

to exemplify what i’m saying:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language"	content="en">

  <style type="text/css">
  
  

  </style>

  

</head><body>

<table border="1" cellpadding="2" cellspacing="0" width="600" style='table-layout:fixed'>
    <col width=40>
    <col width=97>

    <tr valign="top">
        <td align="center"><span class="Body2"><a href="index.jsp?ID=21">21<br>(22)</a></span></td>
        <td style="overflow:hidden; width:50px; max-width:50px;"><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">i should try and use words in the phrase i'd like to wrap, like noonnope is saying<br></span><span class="Body2"></span></a></td>
    </tr>
</table>

</body></html>

For a word such as “multidimensional”, the problem is either the word is truncated (and becomes “multidimens”) or the word extends past the column boundary, so a way to wrap a long word is still desired.

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language"	content="en">

  <style type="text/css">
  
  

  </style>

  

</head><body>

<table border="1" cellpadding="2" cellspacing="0" width="600" style='table-layout:fixed'>
    <col width=40>
    <col width=97>

    <tr valign="top">
        <td align="center"><span class="Body2"><a href="index.jsp?ID=21">21<br>(22)</a></span></td>
        <td style="overflow:hidden; width:50px; max-width:50px;"><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">multidimensional multidimensional multidimensional multidimensional multidimensional multidimensional multidimensional multidimensional multidimensional<br></span><span class="Body2"></span></a></td>
    </tr>
</table>

</body></html>

do you experience any of the “either the word is truncated (and becomes “multidimens”) or the word extends past the column boundary, so a way to wrap a long word is still desired.” still? if so, please provide a screen shot :slight_smile:

please give me a screen shot of such a word fitted in your example on your side :slight_smile:

until then, here is my screen shot.

are there any “either the word is truncated (and becomes “multidimens”) or the word extends past the column boundary, so a way to wrap a long word is still desired.”?

otherwise, you are looking at a word hyphenation done manually with & shy;­ or automated by javascript.

I apologize for the misunderstanding.
The table has more than two columns, so its width is 600.
I put only two columns in my original table to illustrate my point.
If you put in two more columns, then you will see the problem I have.
e.g. a table of four columns:

<table border="1" cellpadding="2" cellspacing="0" width="600" style='table-layout:fixed'>
    <col width=40>
    <col width=97
    <col width=76>
    <col width=89>


    <tr valign="top">
        <td align="center"><span class="Body2"><a href="index.jsp?ID=21">21<br>(22)</a></span></td>
        <td style="overflow:hidden; width:50px; max-width:50px;"><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br></span><span class="Body2"></span></a></td>
        <td align="center"><span class="Body2">OK&nbsp;</span></td>
        <td align="center"><span class="Body2">Accepted&nbsp;</span></td>

    </tr>
</table>

try this:

<span class="bodySmall" style="word-wrap: break-word;">longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br></span>

edit: word-wrap: break-word; works for all except ie8. ie8 has a problem with the <br> element and doesn’t wrap the <span> content. so you need to remove the <br> element.

It works!
Thanks!

you’re welcome :slight_smile:

As mentioned, word-wrap is the solution, NOT overflow… but your problems if your example code is typical run a lot deeper than some minor formatting issue.

See, you may want to try these two things called “Modern markup” and “Valid Markup”…

Since in MODERN doctypes COL is invalid unless it’s in a COLGROUP… and VALIGN, ALIGN, CELLPADDING, BORDER, CELLSPACING when set to 0, WIDTH and even STYLE have no business being in your markup – much less the extra spans that appear to be for nothing.

The use of vague/meaningless and possibly unnecessary classes like ‘body2’ and presentational classes like “bodysmall” certainly aren’t helping you any.

Though I’d have to see a larger dataset and any related headings to say for sure – with what you presented I even have doubts it’s tabular data! (or enough ‘columns’ to be WASTING a table on – especially with the top alignment)

ASSUMING that’s tabular data, your markup should look more like this:


<table id="describeThisHere">
	<tr>
		<th>
			<a href="index.jsp?ID=21">21<br />(22)</a>
		</th><td>
			<a href="index.jsp?ID=21">
				longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br />
			</a>
		</td>
	</tr>
</table>

Though I’m making a wild assumption about what those numbers are and which one is the heading for the row… Part of why just one TR doesn’t always convey your meaning especially without the column headings (which you should have in THEAD if that’s acutally tabular data).

EVERYTHING else goes in the stylesheet.