Dot leaders with text that may wrap

Question

I'm trying to work out how to have a leader between text that may wrap. The leader should have a variable width and work when even when there is only one word on either side.

Here is an example:

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

I have tried the solutions at http://www.w3.org/Style/Examples/007/leaders.en.html and in other similar questions here (CSS Dot Leaders With Textured Background & Table of contents: leading dots). Unfortunately none of those actually work when both sides of the text wrap.

I have a Fiddle http://jsfiddle.net/crstop/vkDgJ/12/ with the closest I have gotten to a solution. It works fairly well but the fixed width of the leader dots isn't ideal.

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:

ul.leaders {
    padding: 0;
    overflow-x: hidden;
    list-style: none;
}
ul.leaders .dotsA:Before {
    width: 0;
    white-space: norrmal;
    background: white;
    vertical-align: center;
    content:". . . . . . . . . . . . . . . . . . . . "
            ". . . . . . . . . . . . . . . . . . . . ";
}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white;
}
ul.leaders span + span + span {
    float: right;
    padding-left: 0.33em;
    background: white;
}

I would like a pure css solution but I'm willing to use jQuery if this isn't possible in css only. It must also work in IE8+ and FF17+

Answer 1

If I get this right, a slight change in your HTML may fix it.

<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>

Here is a demo: http://jsfiddle.net/vkDgJ/17/