Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Handling long strings in HTML Table

Posted on 2004-09-27
5
Medium Priority
?
1,601 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 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

824 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