Các nhà lãnh đạo có văn bản có thể quấn

Question

Tôi đang cố gắng tìm ra cách để có một nhà lãnh đạo giữa văn bản có thể bọc. Các nhà lãnh đạo nên có một chiều rộng biến và làm việc khi ngay cả khi chỉ có một từ ở hai bên.

Dưới đây là một ví dụ:

Lorem ipsum dolor sit Amet, consectetur adipiscing elit. Nulla massa neque, laoreet tại euismod vitae, aliquet quis. ....... Curabitur tellus justo, malesuada eget egestas ac, hậu quả sed neque.

Tôi đã thử các giải pháp tại http://www.w3.org/Style/Examples/007/leaders.en.html và trong câu hỏi tương tự khác ở đây (CSS Dot Leaders With Textured Background & Table of contents: leading dots). Thật không may không ai trong số những người thực sự làm việc khi cả hai bên của bọc văn bản.

Tôi có Fiddle http://jsfiddle.net/crstop/vkDgJ/12/ với gần nhất tôi đã nhận được giải pháp. Nó hoạt động khá tốt nhưng độ rộng cố định của các điểm đứng đầu không phải là lý tưởng.

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:

Tôi muốn một giải pháp css tinh khiết nhưng tôi sẵn sàng để sử dụng jQuery nếu điều này là không thể trong css chỉ . Nó cũng phải hoạt động trong IE8 + và FF17 +

Answer 1

Với HTML này:

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

và CSS này:

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

Bạn nên có kết quả tốt. Bạn có thể chơi với nó trên CodePen nếu bạn muốn.

Answer 2

Nếu tôi nhận được quyền này, một chút thay đổi trong HTML của bạn có thể khắc phục.

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

Đây là một bản demo: http://jsfiddle.net/vkDgJ/17/