Remplissez les espaces disponibles entre les étiquettes avec des points ou des traits d'union

Essayez ceci: http://jsfiddle.net/FpRp2/4/ (mis à jour, fonctionne maintenant dans ie7)

La solution @Marcel a donné pour utiliser une bordure pointillée au lieu de traits de texte résolu le problème final avec IE7.

(Notez que je n'ai testé que dans Safari, Firefox et Chrome jusqu'à présent.)

EDIT: IE8 fonctionne. Travailler sur un correctif pour IE7.

HTML

<div class='outer'> <div class='container'> <div class='filler'></div> <span class='label'>some label</span> <span class='text'>some text</span> </div> <br> <div class='container'> <div class='filler'></div> <span class='label'>some other label</span> <span class='text'>some other text</span> </div> </div> 

CSS

 .outer { display: inline-block; *display: inline; zoom: 1; position: relative; clip: auto; overflow: hidden; } .container { position: relative; text-align: right; white-space: nowrap; } .filler { position: absolute; left: 0; right: 0; border-bottom: 1px dashed #333; height: 50%; } .label { background: white; float: left; margin-right: 20px; padding-right: 4px; position: relative; } .text { background: white; padding-left: 4px; position: relative; } 

J'ai implémenté cela sur une table avec un CSS pur et même sans utiliser de span ou div.

CSS est:

 .dot-table td { max-width:200px; overflow:hidden; white-space:nowrap; } .dot-table td:first-child:after { content:" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - " } 

HTML est

 <table class="dot-table"> <tr> <td> Coffee </td> <td> 45 INR </td> </tr> <tr> <td> Tea </td> <td> 36 INR </td> </tr> </table> 

Une sortie détaillée (à partir d'un site que j'ai développé)

Regardez-le en direct ici .

Vous devez utiliser CSS pour ajuster la disposition des deux éléments. Détachez l'étiquette en deux étiquettes et appliquez les classes css à chacune, ou enveloppez chaque bit de texte dans votre étiquette avec une étiquette <span> et définissez-les de cette façon.

Remplir de l'espace vide avec des caractères pour essayer d'ajuster la mise en page n'est pas la bonne approche, et ne serait pas recommandé pour les mêmes raisons que vous ne formatez pas vos documents texte en ajoutant des caractères d'espace partout.

Pour ceux qui sont intéressés, voici une autre façon de le faire à partir du W3C à l'aide de CSS avec des liens vers d'autres techniques similaires:

http://www.w3.org/Style/Examples/007/leaders.en.html

1. Trouvez la première instance de trois espaces. Je suppose que c'est le nombre minimum nécessaire pour constituer une "pause"

2. Trouvez le premier caractère non-espace après cela.

3. Remplacez tous les espaces entre l'index en # 1 (+1) et l'indice en # 2 (-1). Cela vous donnerait les résultats ci-dessus.

Vérifiez d'autres réponses pour des façons plus propres de le faire avec CSS. Ce serait le moyen le plus propre à afficher le texte. Dashes regarde le ghetto. 🙂

Une solution à l'aide de flexbox, avec prise en charge du débordement de texte: les points forts pour garder le contenu sur une ligne:

http://codepen.io/anon/pen/jPZdgr

 .item { display: flex; justify-content: space-between; } .descripcion { /*background-color: green;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .descripcion:after { content: " ........................................................................................................................................................................................................................................................................................." } .precio { /*background-color: red;*/ flex-shrink: 0; } 

 <div class="item"> <div class='descripcion'>Junta la trócola</div> <div class='precio'>0´33</div> </div> <div class="item"> <div class='descripcion'>Gamusinos en oferta c/u</div> <div class='precio'>6´47</div> </div> <div class="item"> <div class='descripcion'>Saco de rafia y linterna a pedales</div> <div class='precio'>12´663584153,351,5,154</div> </div> <div class="item"> <div class='descripcion'>Jaula de bambú con led para gamusinos</div> <div class='precio'>21´99</div> </div> <div class="item"> <div class='descripcion'>Otro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dos</div> <div class='precio'>1.694</div> </div> <div class="item"> <div class='descripcion'>Chismes y achiperres surtidos</div> <div class='precio'>0´10</div> </div> <div class="item"> <div class='descripcion'>Yugo, barzón, cavijal y mancera</div> <div class='precio'>33´7433333333333333333333</div> </div> <div class="item"> <div class='descripcion'>Coyunda, sobeo, ramales y cordel</div> <div class='precio'>125´87</div> </div> <div class="item"> <div class='descripcion'>Media, cuartilla, celemín y 1 envuelza</div> <div class='precio'>48´04</div> </div> 

Une solution simple, qui prend en charge les pauses de ligne et fonctionne dans IE 8+, FF et Chrome. L'IE ci-dessous 8 est pris en charge, lorsque les points sont placés directement dans la division de remplissage d'espace.

CSS est

 .spacefill, .spacefill-dots { line-height: 18px; font-size: 16px; } .spacefill { position: relative; padding: 0; margin: 0; border: 0; } .spacefill-dots { z-index: -1; /* Push dots behind text */ height: 18px; /* Same as line-height */ border: 0; margin: 0; padding: 0; left: 0; right: 0; bottom: 0; position: absolute; overflow: hidden; } .spacefill-text { background: white; /* Very important. Choose backgroundcolor*/ padding-right: 4px; /* Optional space before first point*/ } .spacefill .spacefill-dots::after { content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................" } 

HTML est:

 <div class="spacefill"> <div class="spacefill-dots"></div> <span class="spacefill-text">Short title</span> </div> 

Voici un exemple simple pour une table de contenu: https://jsfiddle.net/dua2tp11/

Le terme typographique pour cette fonctionnalité est "point leaders". Plus de solutions sur Créer des points de tête dans CSS .