Question

47

Fill available spaces between labels with dots or hyphens

rated 0 times [ 53] [ 6] / answers: 1 / hits: 18491 / 14 Years ago, tue, june 22, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

luzv

Add To Favorites

Follow

Total Points: 178

Total Questions: 105

Total Answers: 114

Location: Palau

Member since Tue, May 30, 2023

1 Year ago

answered 14 Years ago kaitlynnb · Accepted Answer

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

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

}

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