用點或連字符填充標籤之間的可用空間

Question

我有一個包含在div中的標籤的頁面，標籤有一個變量並且我想用兩個字符，點或' - '填充兩個空格。

例如。

我的標籤文本1 -----------一些文本在這裏。

我的文本2 ----------------------- Another Text。如果你注意到兩個文本都是正確的（或者至少我嘗試），可能是一個計數字符的問題，但字符可以有不同的寬度，任何人都知道一個乾淨的方式在Asp.Net，CSS， jquery或其他什麼？

更新

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

有人在答覆建議對齊CSS既標籤，但我想我將有同樣的問題中間的字符，當然可以是另一個標籤。有什麼想法嗎？

更新

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

從帕特里克的答案是非常接近的解決方案，但現在連字符沒有在IE8顯示，也許在我的一個評論中有一個小姐明白，它應該適用於IE7，IE8和Firefox，只有這些瀏覽器。

感謝大家。

Answer 1

試試這個：http://jsfiddle.net/FpRp2/4/（更新，現在在IE7）

@Marcel了用虛線邊框，而不是文本連字符解決的最後一個問題與IE7的解決方案。

（注意，我只在Safari，Firefox和Chrome測試爲止。）

編輯：IE8工作。 正在解決IE7問題。

HTML

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

CSS

.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

您需要使用CSS來調整這兩個內容的佈局。將標籤分成兩個標籤並將css類應用於每個標籤，或者將標籤中的每一位文本用<span>標籤包裝起來，並以這種方式對其進行設計。

使用字符填充空白區域以嘗試調整佈局不是正確的方法，因爲您不通過在任何地方添加空格字符來格式化文本文檔，所以不推薦這樣做。

Answer 3

1. 查找三個空格的第一個實例。我假設這是構成「休息」所需的最小數量

2. 之後找到第一個非空格字符。

3. 替換＃1（+1）中的索引與＃2（-1）中的索引之間的所有空格。那會給你上面的結果。

查看其他答案更乾淨的方式來做到這一點與CSS。這將是顯示文本的最乾淨的方式。虛線看起來貧民窟。 :)

Answer 4

我與純CSS實現了這個桌子上，甚至不使用任何範圍或DIV。

CSS是：

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

HTML是

<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

一個簡單的解決方案，即支持線休息和工作在IE 8+，FF &鉻。當點直接放置在spacefill-dots div中時，支持低於8的IE。

CSS是

.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: "........................................................................................................................................................................................................................................................................................................................................................................................................................................" 
} 

HTML是：

<div class="spacefill"> 
    <div class="spacefill-dots"></div> 
    <span class="spacefill-text">Short title</span> 
</div> 

下面是一個目錄一個簡單的例子：https://jsfiddle.net/dua2tp11/