Simulation : http://jsfiddle.net/frontenddeveloper/VXg2D/597/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ul class="list"> <li> <span class="label-wrapper"><span class="label">Pomme : </span><span class="dots"></span></span> <div class="content"> Lorem Elsass ipsum aliquam ante bredele senectus tchao bissame Richard Schirmeck auctor, tellus Gal ! Pfourtz ! Morbi hopla Coopé de Truchtersheim libero. vulputate mollis mänele salu Oberschaeffolsheim gravida rossbolla purus Salut bisamme Yo dû. </div> </li> <li> <span class="label-wrapper"><span class="label">Poire : </span><span class="dots"></span></span> <div class="content"> nüdle Salu bissame und messti de Bischheim picon bière chambon Chulia Roberstau barapli Carola schpeck yeuh. Chulien leo libero, knack wurscht sed schnaps porta hopla s'guelt gewurztraminer Heineken dui Mauris DNA, munster Racing. </div> </li> <li> <span class="label-wrapper"><span class="label">Kiwi : </span><span class="dots"></span></span> <div class="content"> Lorem ipsum ... </div> </li> <li> <span class="label-wrapper"><span class="label"> : </span><span class="dots"></span></span> <div class="content"> </div> </li> </ul> |
|
1 2 3 4 |
var max = 120; jQuery('.list .dots').each(function(){ jQuery(this).width(max - jQuery(this).prev('.list .label').width() - 10); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.list li { width: 100%; float: left; clear: both; margin-bottom: 12px; list-style-type: none; } .list .label-wrapper { float: left; margin-right: 10px; } .list .label { display: inline-block; } .list .dots { border-bottom: 1px dotted #C9CACC; display: inline-block; height: 6px; margin-left: 10px; } .list .content { overflow: hidden; } |