Some experimentation with the text-overflow property.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <body>
<div style="border: 1px solid red; max-width: 400px; overflow:hidden; text-overflow: ellipsis;">
<nobr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac libero nec est luctus aliquam. Nulla sodales, dolor a consectetur volutpat, elit mi convallis sem, at ornare ligula odio non metus. </nobr>
</div>
</body>
</html>

Firefox 3.5

Safarai 4

IE 7

A little CSS pattern to demonstrate what to do when you want one column to stay at a fixed width and the other column to stretch horizontally with the window. Thanks to my friend CSS guru Joe Silvashy for this one.

What I want it a column on my right side to be a fixed width, and the column on the left to stretch with the window gracefully (in web terms this is called a "liquid" layout).

© 2012 Tech Notes Suffusion theme by Sayontan Sinha