डॉट्स या हाइफ़न के साथ लेबल के बीच उपलब्ध रिक्त स्थान

Question

मेरे पास एक पृष्ठ है जिसमें एक div में निहित लेबल हैं, लेबल के साथ एक चर है और मैं अक्षर, बिंदु या '-' दोनों के बीच रिक्त स्थान भरना चाहता हूं।

उदाहरण के लिए

।

मेरा लेबल टेक्स्ट 1 ----------- यहां कुछ पाठ।

मेरा टेक्स्ट 2 ----------------------- एक और पाठ।

यदि आप देखते हैं कि दोनों टेक्स्ट उचित हैं (या कम से कम मैं कोशिश करता हूं), तो वर्णों की गिनती करने में समस्या हो सकती है लेकिन चरित्र की अलग-अलग चौड़ाई हो सकती है, कोई भी इस प्रोग्राम को Asp.Net, css में करने का एक साफ तरीका जानता है, jquery या कुछ और?

अद्यतन

................

किसी ने जवाब में सुझाव दिया सीएसएस के साथ दोनों लेबल संरेखित, लेकिन मैं मैं के साथ एक ही समस्या हो रही हो जाएगा लगता है बीच में वर्ण, जो पाठ्यक्रम का एक और लेबल हो सकता है। कोई विचार?

अद्यतन

.................

पैट्रिक से उत्तर वास्तव में समाधान के करीब है, लेकिन अब हाइफ़न IE8 में नहीं दिखाए जाते हैं, हो सकता है मेरी टिप्पणियों में से एक में एक मिस समझ में आता है, इसे आईई 7, आईई 8 और फ़ायरफ़ॉक्स पर ही काम करना चाहिए, केवल इन ब्राउज़र।

सभी के लिए धन्यवाद।

Answer 1

इस प्रयास करें:http://jsfiddle.net/FpRp2/4/(अद्यतन, अब IE7 में काम करता है)

समाधान @Marcel डैश वाला बॉर्डर का उपयोग करने के बजाय पाठ हाइफ़न IE7 के साथ अंतिम समस्या हल हो जाती दे दी है।

(ध्यान दें, मैं केवल अब तक सफारी, फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया है।)

संपादित करें: IE8 काम करता है। आईई 7 के लिए एक फिक्स पर काम करना।

एचटीएमएल

<div class='outer'> 
    <div class='container'> 
     <div class='filler'></div> 
     <span class='label'>some label</span> 
     <span class='text'>some text</span> 
    </div> 
    <br> 
    <div class='container'> 
     <div class='filler'></div> 
     <span class='label'>some other label</span> 
     <span class='text'>some other text</span> 
    </div> 
</div> 

सीएसएस

.outer { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    position: relative; 
    clip: auto; 
    overflow: hidden; 
} 
.container { 
    position: relative; 
    text-align: right; 
    white-space: nowrap; 
} 
.filler { 
    position: absolute; 
    left: 0; 
    right: 0; 
    border-bottom: 1px dashed #333; 
    height: 50%; 
} 
.label { 
    background: white; 
    float: left; 
    margin-right: 20px; 
    padding-right: 4px; 
    position: relative; 
} 
.text { 
    background: white; 
    padding-left: 4px; 
    position: relative; 
} 

Answer 2

आपको सामग्री के दो टुकड़ों के लेआउट को समायोजित करने के लिए सीएसएस का उपयोग करने की आवश्यकता है। या तो लेबल को दो लेबल में विभाजित करें और प्रत्येक के लिए सीएसएस कक्षाएं लागू करें, या <span> टैग के साथ अपने लेबल के अंदर प्रत्येक बिट टेक्स्ट को लपेटें और उन्हें शैली दें।

पात्रों के साथ खाली जगह भरने लेआउट समायोजित करने का प्रयास करने के लिए सही दृष्टिकोण नहीं है, और एक ही कारण आप हर जगह स्पेस वर्णों जोड़कर अपने पाठ दस्तावेज़ फ़ॉर्मेट नहीं करते के लिए अनुशंसित नहीं किया जाएगा।

Answer 3

1. तीन रिक्त स्थान का पहला उदाहरण खोजें। मैं यह सोचते हैं कि यह न्यूनतम संख्या को एक "तोड़"

2. गठन करने के लिए उस के बाद पहली गैर अंतरिक्ष चरित्र का पता लगाएं की जरूरत है।

3. # 1 (+1) में सूचकांक और # 2 (-1) में सूचकांक के बीच सभी रिक्त स्थान बदलें। इससे आपको उपरोक्त परिणाम मिलेंगे।

सीएसएस के साथ ऐसा करने के लिए और अधिक साफ तरीके के लिए अन्य उत्तरों की जांच करें। पाठ को प्रदर्शित करने का यह सबसे साफ तरीका होगा। डैश यहूदी दिखते हैं। :)

Answer 4

मैं शुद्ध सीएसएस के साथ एक मेज पर इस को लागू किया है और यहां तक ​​कि किसी भी अवधि का उपयोग कर या div के बिना।

सीएसएस है:

.dot-table td { 
    max-width:200px; 
    overflow:hidden; 
    white-space:nowrap; 
} 
.dot-table td:first-child:after { 
    content:" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - " 
} 

एचटीएमएल

<table class="dot-table"> 
    <tr> 
    <td> 
     Coffee 
    </td> 
    <td> 
     45 INR 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Tea 
    </td> 
    <td> 
     36 INR 
    </td> 
    </tr> 
</table> 

एक विस्तृत उत्पादन (एक साइट मैं विकसित से)

देखें यह लाइव here है।

Answer 5

पाठ-अतिप्रवाह के लिए flexbox का उपयोग कर, समर्थन के साथ एक समाधान: अंडाकार 1 लाइन पर सामग्री रखने के लिए:

http://codepen.io/anon/pen/jPZdgr

.item { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.descripcion { 
 
    /*background-color: green;*/ 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.descripcion:after { 
 
    content: " ........................................................................................................................................................................................................................................................................................." 
 
} 
 
.precio { 
 
    /*background-color: red;*/ 
 
    flex-shrink: 0; 
 
}

<div class="item"> 
 
    <div class='descripcion'>Junta la trócola</div> 
 
    <div class='precio'>0´33</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Gamusinos en oferta c/u</div> 
 
    <div class='precio'>6´47</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Saco de rafia y linterna a pedales</div> 
 
    <div class='precio'>12´663584153,351,5,154</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Jaula de bambú con led para gamusinos</div> 
 
    <div class='precio'>21´99</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Otro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre 
 
    más de una, o de dosOtro concepto más repartido entre más de una, o de dos</div> 
 
    <div class='precio'>1.694</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Chismes y achiperres surtidos</div> 
 
    <div class='precio'>0´10</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Yugo, barzón, cavijal y mancera</div> 
 
    <div class='precio'>33´7433333333333333333333</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Coyunda, sobeo, ramales y cordel</div> 
 
    <div class='precio'>125´87</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Media, cuartilla, celemín y 1 envuelza</div> 
 
    <div class='precio'>48´04</div> 
 
</div>

Answer 6

एक सरल समाधान है कि लाइन का समर्थन करता है आईई 8+, एफएफ & क्रोम में ब्रेक और काम करता है। 8 से नीचे आईई समर्थित है, जब डॉट्स सीधे स्पेसफिल-डॉट्स div में रखा जाता है।

सीएसएस

.spacefill, 
.spacefill-dots { 
    line-height: 18px; 
    font-size: 16px; 
} 

.spacefill { 
    position: relative; 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

.spacefill-dots { 
    z-index: -1; 
    /* Push dots behind text */ 
    height: 18px; 
    /* Same as line-height */ 
    border: 0; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    overflow: hidden; 
} 

.spacefill-text { 
    background: white; 
    /* Very important. Choose backgroundcolor*/ 
    padding-right: 4px; 
    /* Optional space before first point*/ 
} 

.spacefill .spacefill-dots::after { 
    content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................" 
} 

एचटीएमएल है: https://jsfiddle.net/dua2tp11/