Solved

Handling long strings in HTML Table

Posted on 2004-09-27
5
1,583 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

746 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

11 Experts available now in Live!

Get 1:1 Help Now