Fill available spaces between labels with dots or hyphens

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

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

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

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

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