Forum Moderators: not2easy
#line{height:20px;margin:0;padding:0 10px;line-height:20px;overflow:hidden;clear:both}
#line div{float:left;margin:0;padding:0}
#a{width:34%;text-align:left}
#b{width:32%;text-align:center}
#c{width:34%;text-align:right}
<div id="line">
<div id="a">Data A</div>
<div id="b">Data B</div>
<div id="c">Data C</div>
</div><div id="line">
<div id="a"><span>Data </span>A</div>
<div id="b"><span>Data </span>B</div>
<div id="c"><span>Data </span>C</div>
</div>
<html>
<head>
<style type = "text/css">
body {line-height: 1.2em;}
.data {text-align: center; padding: 0 10px; margin: 2em 0;
overflow: hidden;}
span.left {float: left; text-align: left; padding-right: 1em; max-width: 40%;}
span.right {float: right; text-align: right; padding-right: 1em; max-width: 40%;}
.cutoff {height: 1.2em;}
</style>
</head>
<body>
<div class = "data">
<span class = "left">Data A</span>
<span class = "right">Data C</span>
Data B
</div>
<div class = "data">
<span class = "left">Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus eludet? Quem ad finem sese effrenata jactabit audacia? Nihilne te nocturnum praesidium Palatii, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora vultusque moverunt. Patere tua consilia non sentis? Constrictam omnium horum scientia teneri conjurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? O tempora, O mores!</span>
<span class = "right">Quo usque tandem {et cetera, same text}</span>
Quo usque tandem {et cetera, same text}
</div>
<div class = "data cutoff">
<span class = "left">Quo usque tandem {et cetera, same text}</span>
<span class = "right">Quo usque tandem {et cetera, same text}</span>
Quo usque tandem {et cetera, same text}
</div>
</body>
</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>
[edited by: alt131 at 10:29 pm (utc) on Sep 13, 2012]
