Code
<html>
<head>
<script>
function init () {
var ellipsisSeq = 0;
var ellipsisEls = document.getElementsByTagName('span');
for (var i = 0; i < ellipsisEls.length; i++) {
var el = ellipsisEls[i];
if (el.className.match(/ellipsis/)) {
var maxLength = el.getAttribute("maxLength");
if (!maxLength) maxLength = 10;
var longText = el.innerHTML;
var shortText = trim(stripTags(el.innerHTML));
if (shortText.length < maxLength) continue;
shortText = shortText.substring(0, maxLength);
el.id = "ellipsis" + ellipsisSeq++;
el.innerHTML =
'<span id="' + el.id + 'short">' + shortText +
'<a href="javascript:ellipsisLong(\'' + el.id + '\')">...</a>' +
'</span>' +
'<span style="display:none" id="' + el.id + 'long">' +
longText +
'<a href="javascript:ellipsisShort(\'' + el.id + '\')">...</a> ' +
'</span>';
}
}
}
function stripTags (t) {
while (t.match(/<.*>/)) t = t.replace(/<[^>]*>/, "");
return t;
}
function trim (t) {
return t.replace(/^[ \r\n\t]*/, "").replace(/[ \r\n\t]*$/, "");
}
function ellipsisShort (id) {
document.getElementById(id + "short").style.display = "inline";
document.getElementById(id + "long").style.display = "none";
}
function ellipsisLong (id) {
document.getElementById(id + "short").style.display = "none";
document.getElementById(id + "long").style.display = "inline";
}
</script>
</head>
<body onload="init()">
<table border="1">
<tr>
<td>
<span class="ellipsis" maxLength="100">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Proin quis wisi in velit faucibus
tincidunt. Integer sodales metus ut nulla. Nullam porta tincidunt
massa. Pellentesque vel pede. Donec malesuada pharetra tortor.
Donec dolor magna, rhoncus ac, malesuada sit amet, ullamcorper vel,
nunc. Vestibulum sed erat. Fusce leo dolor, tincidunt at, euismod
in, auctor in, orci. Donec feugiat nisl ac mauris. Suspendisse
potenti. Integer at sem. Proin a lacus. Nullam venenatis. Nullam
ac neque. Pellentesque enim turpis, pulvinar eget, semper eu,
lobortis vitae, erat. Nulla consequat. Morbi sed ipsum vitae metus
ornare molestie. Aliquam erat volutpat. Aliquam sollicitudin metus
in est. Etiam tincidunt sollicitudin tortor.</span>
</td>
<td>
<span class="ellipsis" maxLength="50">Donec vitae lectus. Mauris
vitae massa. Nulla neque. Curabitur justo libero, dapibus in,
ornare ut, fermentum ac, urna. Etiam velit massa, iaculis sit amet,
tincidunt vel, lacinia non, dui. Vivamus vel sem. In non velit.
Donec placerat molestie enim. Nunc quis purus id purus ultrices
tempus. Etiam consectetuer nibh ac lectus. In et lorem. In pede
arcu, posuere non, volutpat eu, hendrerit non, eros. Integer enim
risus, egestas vitae, tincidunt ac, auctor non, ligula. Duis id
justo at nulla feugiat lacinia. Quisque pretium, lacus ut auctor
eleifend, dolor libero accumsan mi, sed pharetra magna felis ac
felis. Suspendisse malesuada quam. Quisque sem. Quisque vitae
tortor. Mauris tellus felis, laoreet quis, sodales nec, laoreet et,
tellus.</span>
</td>
</tr>
</table>
</body>
</html>