Hello,
I have the following HTML / CSS that draws 2 rows. Each row has 3
cells. I want the cells within each row to span a single line. Each
cell is 100px wide, and the row containing them is 250px wide. Clearly
the last cell won't fix, but rather than wrapping to the next 'line'
within the row, I'd like the last cell to be clipped and only showing
the first 50px.
This code was developed in IE6. Can't say what it looks like in
mozilla.
Any ideas anyone?
Oh, and before you ask, no I don't have a URL you can visit -- sorry!
<html>
<head>
<style>
..cell {
border: 1px dashed #999999;
float: left;
height: 22px;
overflow: hidden;
padding: 0px 1px 0px 1px;
text-overflow: ellipsis;
width: 100px;
}
..row {
border: 1px solid #333333;
height: 22px;
width: 250px;
}
</style>
</head>
<body>
<div class="row">
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
</div>
<div class="row">
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
