Find solution
How to encode sharp character in HTML?

What is the best way to fill a span with a character in valid HTML?

  • This is harder to frame in a question than to explain. Assume a HTML based restaurant menu in which an unordered list is built somewhat along these lines <li>[dish name]<span>[dish price]</span></li> What is the best (and valid) approach to fill the space between the end of the name and beginning of the price (assuming float: left; is assigned to li span) with a character without resorting to graphics and background-image:? This would ideally yield something along the lines of: Beer Basted Boar Ribs ................................... 4g 2s 11c Carrion Gizzard Surprise .................................. 2g 6s 11c

  • Answer:

    Typographers call it a "leader".  It's something that they're adding to CSS3: http://www.w3.org/TR/css3-gcpm/#leaders Meantime, you can fake it by putting the dots into a ":before" pseudo-element and hiding them behind the actual spans with a background color.  This works well with a plain flat background rather than an image. A more detailed description: http://www.w3.org/Style/Examples/007/leaders.en.html This is the kind of thing that you'd better test on several different browsers because it sounds like it's just begging to fail on somebody's crummy CSS implementation.

Joshua Engel at Quora Visit the source

Was this solution helpful to you?

Other answers

Updated answer: You can easily get something like this using straight forward css (no images required). Check this updated fiddle at http://jsfiddle.net/BNV2w/1/ Why not use <label> (floating left) for your name and <span> floating right in your <li>s. And then use css to style your li's. Here's an example with a link to jsFiddle: Updated HTML: <li> <div class="dotted-bg"></div>    <label>Beer Basted Boar Ribs</label><span>4g 2s 11c</span> </li> <li> <div class="dotted-bg"></div>    <label>Carrion Gizzard Surprise</label><span>2g 6s 11c</span> </li> Updated CSS: li {     list-style:none;        overflow:hidden;     padding:5px 0;     position:relative; } li label {     float:left;     background:#fff;     padding-right:10px; } li span {     float:right;     background:#fff;     padding-left:10px; } .dotted-bg {     border-top:dotted 2px #ccc;     position:absolute;       top:15px;     left:0;     width:100%;     z-index:-1; } Check this working demo: http://jsfiddle.net/BNV2w/1/

Prashant Chaudhary

This is still a little trickier than it seems without images, but it doesn't require any kind of algorithms to pull off (thus it will work across browsers). Here's how I solved it: Create a container, in this case your <li>. Set that to display:block; with the CSS. Create a <span class="Item"> and wrap your label in it, then create a <span class="Price"> and wrap your price in it. Both of these should be set to display:block. Set both to background-color:white. This is critical, because these will essentially cover up unneeded dots. Set the <li> to have a border-bottom:1px dotted black; Set both the Item and the Price to position:relative; and top:4px. Round it out by repositioning the LI's position:relative;top:-4px; That's it. <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> ul { margin:0px; padding:0px; } li { display:block; width:300px; height:20px; border-bottom:1px dotted black; margin:0px 0px 0px 0px; padding:0px; position:relative; top:-4px; } .Item { display:block; float:left; background-color:white; padding:0px 3px 0px 0px; position:relative; top:4px; } .Price { display:block; float:right; background-color:white; padding-left:3px; position:relative; top:4px; } </style> </head> <body> <div> <li><span class="Item">Beer Basted Boar Ribs</span><span class="Price">4g 2s 11c</span></li> <li><span class="Item">Potato</span><span class="Price">2s 11c</span></li> </div> </body>

Asa Sherrill

I'd put the food items onto a table. http://www.w3schools.com/html/html_tables.asp Two columns.  Dot, dot, dot (more than you need).  It'll cut off when you're out of space.  Second column, put the price. Or you can pull it real quick into an Excel spreadsheet, and have the formula calculate the characters plus dots always equalling a fixed that you define.  The only problem is that you'll have to use a monospaced font to make it work. Given the proportional fonts (as opposed to monospace), I can't see how you can get a good left or right justification for the second column without it. [table, get it?] :)

Garrick Saito

I would piggyback on one of the other answers but suggest using a dictionary list.  The menu item in a dt and the price in a dd. This seems more semantic to me than a span.

Aaron Cruz

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.