Dot leader con testo che può avvolgere

Question

Sto provando a capire come avere un capo tra il testo che può avvolgere. Il leader dovrebbe avere una larghezza variabile e lavorare anche quando c'è solo una parola su entrambi i lati.

Ecco un esempio:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa neque, laoreet a euismod vitae, aliquet quis. ....... Curabitur tellus justo, malesuada eget egestas ac, consequat sed neque.

ho provato le soluzioni a http://www.w3.org/Style/Examples/007/leaders.en.html e in altre domande simili qui (CSS Dot Leaders With Textured Background & Table of contents: leading dots). Sfortunatamente nessuno di quelli funziona davvero quando entrambi i lati del testo si avvolgono.

Ho un violino http://jsfiddle.net/crstop/vkDgJ/12/ con il valore più vicino a cui ho ottenuto una soluzione. Funziona abbastanza bene, ma la larghezza fissa dei punti leader non è l'ideale.

HTML:

<ul class=leaders> 
    <li> 
     <span>The text on the left of the leaders. This text can be rather long and 
     may wrap to another line. The leader should start at the end of this and  
     continue until it reaches the beginning of the right side text</span> 
     <span class="dotsA"></span> 
     <span>This is the right side text.This text can be rather long and may wrap 
     to another line. </span> 
    </li> 
    <li><span>one</span><span class="dotsA"><span>word</span> 
</ul> 

CSS:

Vorrei una soluzione CSS puro, ma io sono disposto a utilizzare jQuery, se questo non è possibile in css solo . Deve funzionare anche in IE8 + e FF17 +

Answer 1

Con questo HTML:

<div class="leader"> 
    <span>Peter Piper picked a peck of pickled peppers. A peck of pickled peppers Peter Piper picked. If Peter Piper picked a peck of pickled peppers, Where's the peck of pickled peppers Peter Piper picked?</span> 
    <span>The peck of pickled peppers Peter Piper picked is gone.</span> 
</div> 
<div class="leader"> 
    <span>Really?</span> 
    <span>Really.</span> 
</div> 

e questo CSS:

.leader { 
    position: relative; 
    overflow: hidden; 
    z-index: 0; 
} 
.leader > span { 
    background-color: white; 
} 
.leader > span:first-child:after, .leader > span:last-child:before { 
    position: absolute; 
    background-color: white; 
    z-index: -1; 
    content: "................................................................" 
    "................................................................" 
    "................................................................" 
    "................................................................" 
    "................................................................" 
    "................................................................" 
    "................................................................" 
    "................................................................"; 
    letter-spacing: 0.25em; 
    cursor: default; 
} 
.leader > span:last-child { 
    float: right; 
    background-color: white; 
    text-align: right; 
} 
.leader > span:last-child:before { 
    left: 0; 
} 

Si dovrebbe avere buoni risultati. Se vuoi, puoi giocarci su CodePen.

Answer 2

Se ho capito bene, un leggero cambiamento nel codice HTML potrebbe risolverlo.

<p>The text on the left of the leaders. This text can be rather long and may wrap to another line. The leader should start at the end of this and continue until it reaches the beginning of the right side text<span class="dotsA"></span> 
This is the right side text.This text can be rather long and may wrap to another line. </p> 

Ecco una demo: http://jsfiddle.net/vkDgJ/17/