Problem: I have a large table, with say 20 columns, and 150 rows. The columns can be resized by the user (think excel). Each cell has overflow:hidden set.
Constraints:
Preface: I have no idea how (or if) this will perform in IE6.
There are probably other ways to do this but you could use nested elements and compare their offsetHeight attributes:
<html>
<head>
<style type="text/css">
td { width: 80px; border: 1px solid #000; }
td div { height: 20px; overflow: hidden; }
.highlight { background-color: #efe; }
</style>
</head>
<body>
<table>
<tr>
<td><div><span>A B C</div></span></td>
<td><div><span>D E F G H I J</span></div></td>
<td><div><span>K L M</span></div></td>
</tr>
<tr>
<td><div><span>N O P</span></div></td>
<td><div><span>Q R S</span></div></td>
<td><div><span>T U V W X Y Z</span></div></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready
(
function()
{
$("td div").each
(
function()
{
var collapsedHeight = $(this).attr("offsetHeight");
var actualHeight = $("span", this).attr("offsetHeight");
// if the inner span is taller than the div, make the div green
if (actualHeight > collapsedHeight)
$(this).addClass("highlight");
}
);
}
);
</script>
</body>
</html>
I think the best way is to amortize the overflow detection by (for example) writing to a custom property everytime the user inputs data into a cell.
So, you would be using an approach similar to Lobstrosity's but instead of calculating overflow initially you would be calculating overflow each time a cell's input changes. This has the obvious drawback of not working for pre-populated cells, in this situation way you will have to calculate it for all populated cells at program startup.
Another hardcore option is to fix the cell dimensions (in other words, assuming the cell dimensions are known at page-generation-time) and calculate the overflow on server-side page generation (assuming you are using a server-side language). Its fugly, but it works.
This is what i ended up using. it works in IE only, but that is ok in this case:
add this css rule to the container that has overflow:hidden
text-overflow:ellipsis;