Füllen Sie den Abstand zwischen zwei Elementen automatisch, min Länge?

Question

Ich versuche herauszufinden, wie diese "Auto-Füllung" Punkte auf eine minimale Länge gesetzt werden. Wenn die Bildschirmgröße klein ist, befinden sich manchmal nur ein oder zwei Punkte zwischen den Elementen. Gibt es trotzdem eine Min-Länge zu den Punkten in diesem Code hinzuzufügen?

http://codepen.io/Kseso/pen/fxrsL

<p> 
    <span class='descripcion'>Trócola</span> 
    <span class='precio'>56´72</span> 
</p> 
<p> 
    <span class='descripcion'>Junta la trócola</span> 
    <span class='precio'>0´33</span> 
</p> 
<p> 
    <span class='descripcion'>Gamusinos en oferta c/u</span> 
    <span class='precio'>6´47</span> 
</p> 
<p> 
    <span class='descripcion'>Saco de rafia y linterna a pedales</span> 
    <span class='precio'>12´64</span> 
</p> 
<p> 
    <span class='descripcion'>Jaula de bambú con led para gamusinos</span> 
    <span class='precio'>21´99</span> 
</p> 
<p> 
    <span class='descripcion'>Otro concepto más repartido entre más de una, o de dos, o de tres líneas de texto y así ver cómo se comporta en esta situación</span> 
    <span class='precio'>1.694´99</span> 
</p> 
<p> 
    <span class='descripcion'>Chismes y achiperres surtidos</span> 
    <span class='precio'>c/u 0´10</span> 
</p> 
<p> 
    <span class='descripcion'>Yugo, barzón, cavijal y mancera</span> 
    <span class='precio'>33´74</span> 
</p> 
<p> 
    <span class='descripcion'>Coyunda, sobeo, ramales y cordel</span> 
    <span class='precio'>125´87</span> 
</p> 
<p> 
    <span class='descripcion'>Media, cuartilla, celemín y 1 envuelza</span> 
    <span class='precio'>48´04</span> 
</p> 






* {margin:0;padding:0;border: 0 none;position: relative;} 
html, body { 
    background: #7658F9; 
    padding-top: 1rem; 
    font-family: muli; 
    font-weight: 300; 
    font-style: italic; 
} 
p { 
    background: inherit; 
    width: 70%; 
    max-width: 40rem; 
    min-width: 300px; 
    margin: 0 auto; 
    font-size: 1.2rem; 
    line-height: 1.5rem; 
    color: #fff; 
    padding-right: 4rem; 
    margin-bottom: .5rem; 
} 
p:before { 
    content: ''; 
    position: absolute; 
    bottom: .4rem; 
    width: 100%; 
    height: 0; 
    line-height: 0; 
    border-bottom: 2px dotted #ddd; 
} 
.descripcion { 
    background: inherit; 
    display: inline; 
    z-index: 1; 
    padding-right: .2rem; 
} 
.precio { 
    background: inherit; 
    position: absolute; 
    min-width: 4rem; 
    bottom: 0; 
    right: 0; 
    padding-left: .2rem; 
    text-align: right; 
    z-index: 2; 
} 
.precio:after { 
    content: '€'; 
} 
h1 a { 
    display: block; 
    text-decoration: none; 
    color: rgba(0,0,0,.55); 
    margin-bottom: 1rem; 
    text-align: center; 
    transition: .5s; 
} 
h1 a:hover { 
    color: rgba(0,0,0,.3); 
    letter-spacing: 2px; 
} 

Answer 1

Ich bin in der Lage, damit es funktioniert, aber es ist eine Änderung der HTML-Struktur.

<p> 
    <span class="description-wrapper"> 
     <span class='descripcion'>Otro concepto más repartido entre más de una, o de dos, o de tres líneas de texto y así ver cómo se comporta en esta situación</span> 
     <span class="blank-space-for-dots"></span> 
    </span> 
    <span class='precio'>1.694´99</span> 
</p> 

hinzugefügt CSS

/* added style */ 
.descripcion { 
    background-color: #7658F9; 
} 
.blank-space-for-dots { 
    width: 50px; 
    display: inline-block; 
} 

Sie min Breite der ‚punktierte Linie‘ steuern die width von .blank-space-for-dots

durch Steuerung Dies wird einen leeren Raum mit transparentem Hintergrund nach dem hinzufügen .descripcion Text beendet.

https://codepen.io/jacobgoh101/pen/kkPqmO