टेक्स्ट के साथ डॉट नेताओं

Question

लपेट सकते हैं मैं काम करने की कोशिश कर रहा हूं कि लपेटने वाले पाठ के बीच एक नेता कैसे हो। नेता के पास एक चर चौड़ाई और काम होना चाहिए जब भी किसी भी तरफ केवल एक शब्द हो।

Lorem Ipsum मातम AMET बैठते हैं, consectetur adipiscing elit:

यहाँ एक उदाहरण है। Nulla massa neque, euismod vitae, aliquet quis पर laoreet। ....... Curabitur tellus justo, malesuada eget esaas एसी, परिणाम 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> 

सीएसएस:

मैं एक शुद्ध सीएसएस समाधान चाहते हैं, लेकिन मैं jQuery का उपयोग करने को तैयार हूँ कि अगर यह सीएसएस में संभव नहीं है केवल । यह IE8 + और FF17 +

Answer 1

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

और इस सीएसएस:

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

आप अच्छे परिणाम होना चाहिए

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

यहाँ एक डेमो है। यदि आप चाहें तो CodePen पर इसके साथ आप खेल सकते हैं।

Answer 2

में भी काम करना चाहिए यदि मुझे यह अधिकार मिलता है, तो आपके HTML में थोड़ा बदलाव इसे ठीक कर सकता है। http://jsfiddle.net/vkDgJ/17/