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.

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

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.

Answer 3

A solution using flexbox, with support for text-overflow: ellipsis to keep the content on 1 line:

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 4

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 5

A simple solution, that supports line breaks and works in IE 8+, FF & Chrome. IE below 8 is supported, when dots are placed directly in the spacefill-dots div.

CSS is

.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 is:

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

Here's a simple example for a contents table: https://jsfiddle.net/dua2tp11/

Answer 6

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. :)