jquery - 带有可能换行的文本的点领导者

Question

我正在尝试找出如何在可能换行的文本之间设置前导符。领导者应该有一个可变的宽度，并且即使在两边只有一个单词的情况下也能工作。

这是一个例子:

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.

我已经尝试了 http://www.w3.org/Style/Examples/007/leaders.en.html 的解决方案以及此处的其他类似问题( CSS Dot Leaders With Textured Background 和 Table of contents: leading dots )。不幸的是，当文本的两边都换行时，这些都不起作用。

我有一把 fiddle http://jsfiddle.net/crstop/vkDgJ/12/我最接近解决方案。它工作得相当好，但前导点的固定宽度并不理想。

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

我想要一个纯 css 解决方案，但如果仅在 css 中无法实现，我愿意使用 jQuery。它也必须在 IE8+ 和 FF17+ 中工作

Answer 1

如果我做对了，您的 HTML 中的轻微更改可能会修复它。

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

这是一个演示:http://jsfiddle.net/vkDgJ/17/