In word processing programs like MS Word, it's easy to change a tab's properties so it automatically fills in the space with a dot leader. HTML and CSS have no such capability natively, but here's a pretty simple method that uses a small repeating GIF image to fill in the horizontal space and create the dot leader illusion. This solution will flex to pretty much any width.
| Supreme Rib Dinner – (and now to make sure the line wraps) This is our flagship dish, first created by Mama Ribber, featuring butter-tender succulent meat, slathered in a sweet, tangy barbecue sauce that is guaranteed to bring you back again and again and again and again and again for more. | $14.95 |
| Ribs & Chicken Combo | $13.95 |
| Add Homemade Cole Slaw | $1.95 |
| Add Super Hot Sauce! (Specialty of the House) | $.95 |
This trick is not an elegant method. For one thing, this particular GIF has a white background. If you want it to work on other background colors, you would either have to make the file's background transparent or create a version with your chosen background color.
View Source (includes embedded style sheet)
(If you know of any other examples, I'll be happy to add them here.)
David Lenef
Version 2 - March 1, 2003
david@lenef.com