Remplir les espaces disponibles entre les étiquettes avec des points ou des tirets

Question

J'ai une page avec des étiquettes qui sont contenues dans un div, les étiquettes ont une variable avec et je veux remplir les espaces entre les deux avec des caractères, des points ou '-'.

Par exemple.

Mon texte d'étiquette 1 ----------- du texte ici.

Mon texte 2 ----------------------- Un autre texte. Si vous remarquez que les deux textes sont justifiés (ou au moins j'essaie), il peut s'agir d'un problème de comptage de caractères mais le caractère peut avoir une largeur différente, tout le monde sait comment faire cela par programme dans Asp.Net, css, jquery ou autre chose?

Mise à jour

................

Quelqu'un a suggéré dans les réponses à aligner les deux étiquettes avec css, mais je pense que je vais avoir le même problème avec les personnages au milieu, ce qui peut être une autre étiquette bien sûr. Des pensées?

Mise à jour

.................

Réponse de Patrick est très proche de la solution, mais maintenant les traits d'union ne sont pas représentés dans IE8, peut-être il y a un mec comprendre dans un de mes commentaires, il devrait fonctionner sur IE7, IE8 et Firefox, seulement ces navigateurs.

Merci à tous.

Answer 1

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

La solution a @Marcel d'utiliser une bordure en pointillés au lieu de traits d'union texte résolu la question finale avec IE7.

(Note, je ne l'ai testé dans Safari, Firefox et Chrome jusqu'à présent.)

EDIT: Travaux IE8. 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; 
} 

Answer 2

Vous devez utiliser CSS pour ajuster la disposition des deux parties du contenu. Vous pouvez soit scinder l'étiquette en deux étiquettes et appliquer des classes css à chacune d'entre elles, soit envelopper chaque morceau de texte de votre étiquette avec une balise <span> et les styler de cette façon. Remplir l'espace vide avec des caractères pour essayer d'ajuster la disposition 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 espace partout.

Answer 3

1. Recherchez 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. Remplacer tous les espaces entre l'index dans # 1 (+1) et l'index dans # 2 (-1). Cela vous donnerait les résultats ci-dessus.

Vérifiez les autres réponses pour plus de façons propres de le faire avec CSS. Ce serait le moyen le plus propre d'afficher le texte. Les tirets ressemblent au ghetto. :)

Answer 4

J'ai mis cela sur une table avec CSS pur et même sans utiliser la durée 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 je développé)

Voir en direct here.

Answer 5

Une solution à l'aide FlexBox, avec prise en charge text-overflow: points de suspension pour garder le contenu sur 1 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>

Answer 6

Une solution simple, qui prend en charge la ligne rompt et fonctionne dans IE 8+, FF & Chrome. IE ci-dessous 8 est pris en charge, lorsque les points sont placés directement dans le div de spacefill-dots.

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 des matières: https://jsfiddle.net/dua2tp11/