Solved

Handling long strings in HTML Table

Posted on 2004-09-27
5
1,586 Views
Last Modified: 2012-05-05
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.

0
Comment
Question by:migoEX
  • 2
  • 2
5 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12161389
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
 
LVL 5

Author Comment

by:migoEX
ID: 12161492
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 12161569
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 250 total points
ID: 12163465
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
 
LVL 5

Author Comment

by:migoEX
ID: 12166932
Thanks a lot, it answers my question
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now