roidrage: Is there a CSS trick that allows me to phase out text that overflows a box? Like a shadow over the last couple of chars. [http://twitter.com/roidrage/status/464692600910651392]
let's say you have this html snippet :
<div>
A text that is too long to fit it's container
</div>You can turn into this
<div>
A text that is too long to fit it's container
<img src="elipsis.png" alt="..." class="elipsis" />
</div>The PNG image could be a gradient from transparent (left) to the solid background color (right).
In CSS you can position this image to be right aligned. The text would overflow it's container.
You can also use a span instead of an img, place the PNG as a background of this span and put anything you like in the div.
<div>
A text that is too long to fit it's container
<span class="elipsis">read more</span>
</div>An example :
.elipsis {
position: absolute;
top: 0;
right: 0;
padding: 0 0 0 15px;
background: url(http://assets.example.com/elipsis.png) left top repeat-y
}<div>
<a href="">Hôtel Terminus Saint-Charles</a>
<span class="elipsis">153 m</span>
</div>image :
