Fill available spaces between labels with dots or hyphens

Question

Hello everyone,

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

You need to use CSS to adjust the layout of the two pieces of content. Either break up the label into two labels and apply css classes to each, or wrap each bit of text inside your label with a <span> tag and style them that way.

Filling empty space with characters to try to adjust the layout is not the correct approach, and wouldn't be recommended for the same reasons you don't format your text documents by adding space characters everywhere.

Answer 2

1. Find the first instance of three spaces. I am assuming that this is the minimum number needed to constitute a "break"

2. Find the first non-space character after that.

3. Replace all the spaces between the index in #1 (+1) and the index in #2 (-1). That would give you the results above.

Check other answers for more clean ways to do it with CSS. That would be the cleanest way to display the text. Dashes look ghetto. :)

Answer 3

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