alt131 - 2:39 pm on Sep 13, 2012 (gmt 0)

Hi ocon, what a fun challenge! Is there a reason you are not using a table? I ask because if this is data then a table would be semantically correct. Second, if not a table, what about a list? How do users access the extra data that is hidden? And finally, what user agents are you targeting?

I ask because below is a more modern example of what Lucy has suggested - using a list for the data and text-overflow:ellipsis to deal with the longish content. It requires fixed widths to work around ff's text-overflow bug, but if you can accept the jump, or have another way of dealing with the extra content,the widths can be percentages to make it even more flexible.

If you always know what information is less important this could be simplified even more by using white-space:pre and simply starting the secondary content on a new line (return, not <br> ) in the HTML.

CSS ul { /*set a width other than 100% to avoid ff's jump on hover */ width:1000px; } li { list-style-type:none; float:left; margin:10px; border:3px ridge red; width:280px; /*set a width to avoid ff jumping the ellipsis and scroll bar width on hover*/ height:20px ; padding:0 10px; white-space:nowrap; /*required for ellipsis*/ text-overflow: ellipsis; overflow:hidden; } li:hover { white-space:normal; height:auto; overflow:visible; } li:nth-child(2) {text-align:center} li:last-of-type{text-align:right} HTML <ul> <li>Data a Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</li> <li>Data b </li> <li>Data c</li> </ul>

Edit reason
Removing smilies in code

[edited by: alt131 at 10:29 pm (utc) on Sep 13, 2012]