Fill available spaces between labels with dots or hyphens

Question

I have a page with labels which are contained in a div, the labels has a variable with and i want to fill spaces between both with characters, dots or '-'.

For example.

My label text 1 ----------- Some Text Here.

My text 2 ----------------------- Another Text.

If you notice both text are justified (or at least i try), could be a problem of counting characters but character can have different width, any one knows a clean way of doing this programmatically in Asp.Net, css, jquery or anything else?

Update

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

Someone suggested in answers align both labels with css, but i think i will be having the same problem with the characters in the middle, which can be another label of course. Any thoughts?

Update

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

Answer from Patrick is really close to the solution, but now hyphens are not shown in IE8, maybe there is a miss understand in one of my comments, it should work on IE7, IE8 and Firefox, only these browsers.

Thanks to everyone.

Answer 1

Try this: http://jsfiddle.net/FpRp2/4/ (updated, now works in ie7)

The solution @Marcel gave to use a dashed border instead of text hyphens solved the final issue with IE7.

(Note, I've only tested in Safari, Firefox and Chrome so far.)

EDIT: IE8 works. Working on a fix for 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

I have implemented this on a table with pure CSS and even without using any span or div.

CSS is:

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

HTML is

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

A detailed output (from a site I developed)

View it live here.