36

Possible Duplicate:
Fill available spaces between labels with dots or hyphens

Any way to format text like this with simple CSS? I have a DB of different products with their drugs and doses and want to display them uniformly, but without monospaced fonts.

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml
Community
  • 1
  • 1
Mariano
  • 1,023
  • 1
  • 11
  • 19
  • 3
    Interesting question, never seen this done in HTML. Do the dots `.` need to be dots or could they come from a background image as well? – Pekka Mar 29 '11 at 17:46
  • I'm fairly sure this can be done using pure HTML and CSS, theoretically even without a background image. Can you work with fixed widths, or does the whole thing need to be dynamic e.g. when resizing the page? – Pekka Mar 29 '11 at 17:52
  • 1
    using tables and border is a fair approach i would say http://jsfiddle.net/PAQzW/1/ – amosrivera Mar 29 '11 at 17:55
  • 1
    See this [http://jsfiddle.net/GrAxb/][1] Borrowed the code from [http://stackoverflow.com/questions/3097851/fill-available-spaces-between-labels-with-dots-or-hyphens][2], and adjusted it a bit [1]: http://jsfiddle.net/GrAxb/ [2]: http://stackoverflow.com/questions/3097851/fill-available-spaces-between-labels-with-dots-or-hyphens – Ragnar123 Mar 29 '11 at 17:58
  • it seems a bad idea to complicate things like that just for dots, but this is what he wanted. +1 – amosrivera Mar 29 '11 at 18:00
  • Searched for 5 minutes and didn't find that post. It works great for what I'm trying to do, thanks. – Mariano Mar 29 '11 at 18:01

3 Answers3

42

Here's an elegant and unobtrusive one with some limitations (see below).

JSFiddle

CSS:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

<dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl>

limitations:

  • Doesn't work in IE < 8

  • Accepts only literal characters in the content property, no HTML entities, so no &middot; for example. (This is no problem as @Radek points out, as UTF-8 characters should be able to serve almost every need here).

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    Are HTML entities a problem? We have Unicode these days, and web pages should be UTF-8. –  Mar 29 '11 at 18:40
  • @Radek true, good point. I don't have much experience with `content:` and wasn't sure what it accepts. A quick test shows that Unicode characters are no problem, updated. – Pekka Mar 29 '11 at 18:42
  • 1
    @Pekka It also works without those SPAN elements: http://jsfiddle.net/j6JWT/76/ – Šime Vidas Aug 10 '11 at 23:24
  • 2
    here is another example https://jsfiddle.net/s6yfaeLp/ – Ali Hasan Dec 30 '16 at 20:05
6

Another method:

Live Demo

<style type="text/css">
table {
    border: 1px solid #000;
    width: 200px;
}
td span {
    background-color: #FFF;
}
td.name:before {
    clip: rect(0px, 190px, 20px, 0px);
    content: " ............................................................ ";
    position: absolute;
    z-index: -1;
}
td.amt {
    text-align: right;
}
</style>

<table>
    <tr>
        <td class="name"><span>Drug 1</span></td>
        <td class="amt"><span>10mL</span></td>
    </tr>
    <tr>
        <td class="name"><span>Another drug</span></td>
        <td class="amt"><span>50mL</span></td>
    </tr>
    <tr>
        <td class="name"><span>Third</span></td>
        <td class="amt"><span>100mL</span></td>
    </tr>
</table>

Similar restrictions as Pekka's solution, and would require updating the clip() coords if the width of the table changed.

drudge
  • 35,471
  • 7
  • 34
  • 45
  • 2
    I think your solution looks great in the jsfiddle, but I had a hard time implementing it in an existing design, mainly because of the z-index. Anyway +1. – Valentin Despa Feb 04 '13 at 10:31
-2

Well, you can use css to format divs in order to get that structure. Example:

<div class="table">
<div class="prods">
Drug 1
Another drug
Third
</div>
<div class="dims">
10ml
50ml
100ml
</div>
</div>

Then you format it css:

.prods{float: left; width: 100px}
.dims{float: left; width: 35px}

This is just a very simple example just to get that structure, you should add more visual detail of course.

  • This doesn't address the OP's main issue: To fill the space with dots. Also, since he's displaying tabular data, `
    `s are unnecessary here.
     – drudge Mar 29 '11 at 18:10
  • Yes, when i first saw the dots i didn't knew that he really wanted dots, i thought that it was just to show the alignment, and we can use divs to display tabular data instead of tables, why not? –  Mar 29 '11 at 18:14
  • 2
    @Leandro: Your layout is not semantic and would be very confusing for someone using a screen reader or other accessibility tool. – drudge Mar 29 '11 at 18:18