Solved

Handling long strings in HTML Table

Posted on 2004-09-27
5
1,592 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

734 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