Menu style “…” - fill in with periods

Question

I have been trying to find the best way to create the "....." effect like in a dinner menu: http://cl.ly/0g263j04322m3F140D40

Not sure if it has to be done with just adding in the periods myself or if there is a way to have jQuery or CSS3 to fill it in. Just curious.

Any ideas on what I can do? Or back to the old fashion way of adding periods.

Answer 1

You can use the old CSS border-style: dotted and float the two elements to either side. Just make the two elements either side have opaque backgrounds and borders to hide the dotted border. See example here:

http://jsfiddle.net/7BtYC/

NB: CSS3 provides border-image which could be used to provide a better looking effect than the standard dotted border.

Answer 2

Try this CSS2 solution.

HTML:

<ul> 
    <li><span>Soup</span><span>€ 2.99</span></li>
    <li><span>Ice cream</span><span>€ 5.99</span></li>
    <li><span>Steak</span><span>€ 20.99</span></li>
</ul>

CSS:

ul {
    width: 400px;
    list-style: none;
}
li {
    border-bottom: 2px dotted black;
    height: 20px;
    margin-bottom: 6px;
}
li span {
    position: relative;
    top: 6px;
    float: left;
    clear: right;
    background: white;
    height: 26px;
}
li span+span {
    float: right;
}

Answer 3

There's a solution using an image as the ellipses. You could probably do it with JavaScript, but this is the only CSS way I can think of. Demo here.

What you need to do is give a container element a repeating background of dots, and then any element on top of it has an opaque background; this will hide the dots, giving a half decent effect. Experimentation is key.

Code as follows:

HTML

<div>
    <strong>Big plate o' food</strong><span>1 million money</span>
</div>

CSS

div
{
    background: url('http://media.avclub.com/images/auth/user/57461/ellipsis_png_35x42_crop_q85.jpg') repeat-x;
}

strong, span
{
    background: white;
}

span
{
    float: right;
}

Please note I've used a really crappy image for the ellipses; you can do better.