Handling long strings in HTML Table

Hi all,

I have a table with defined width of columns. The problem is that sometimes the text may be longer than the with of the cell. I'm looking for automatic way (property or style specification) to cut the string with addition of "...", for example:
"This is a long text"
will become
"This is a l..."

PS. I can use the "overflow: hidden;" style specification, but than it only cuts the string, without "..." addition

Thanks in advance.

LVL 5
migoEXAsked:
Who is Participating?
 
seanpowellConnect With a Mentor Commented:
Internet Explorer only, until the ellipsis property is adopted in the CSS-3 spec:
http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow-ellipsis

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">

table
{
      width:300px;
      table-layout:fixed;
}

td
{
      text-overflow:ellipsis;
      overflow:hidden;
      white-space:nowrap;
}

</style>
</head>
<body>
<table>
      <tr>
            <td>This is long text that won't fit</td>
            <td>This is long text that won't fit</td>
            <td>This is long text that won't fit</td>
      </tr>
</table>
</body>
</html>

Thanks,
Sean
0
 
RoonaanCommented:
You'd use javascript or a serverside language:

<script type="text/javascript">
function cutoff(text, size)
{
document.write(text.length > size ? text.substring(0,size-3) + '...' : text);
}
</script>
<td><script type="text/javascript">cutoff('some very long string', 10);</script></td>

-r-
0
 
migoEXAuthor Commented:
1) I don't know the length of the text in pixels
2) Anyway, I don't want to change the original text. For instance, in case the user will resize the column, I want it to be automatically adjusted to the new size
0
 
RoonaanCommented:
1) You haven't got to. You have to specify some size in characters
2) You can't unless you are willing to spend a couple of hours writing javascript code.

-r-
0
 
migoEXAuthor Commented:
Thanks a lot, it answers my question
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.