is it possible in css or javascript to add series of dots on last line (or as a border)

Question

I am working an online ordering system with thousands of items

I currently have two containtered items like the following: http://jsbin.com/opEkItOd/1/edit?html,output

and I want it to have a string of periods on the bottom at the end like the following:

here is some detail for you............... 12.50

edit 1 -

this text could also be multi-line so would wrap; would want the dots to be on only bottom line

---

How could this be achieved either in CSS or Javascript? I was thinking a CSS3 border property but not sure how to calculate percentage which will be variable. Or a jquery function that writes out dots until it hits the end of the line but not sure how I would determing the end of the line for all the different scenarios? Any help / ideas would be appreciated - obviouly would be best for most OS's, browsers but a limited set would also be great.

Answer 1

This is a bit ugly, but may work for you.

working demo

You add an :after class with enough '...' to cover your expected distances, and then hide the rest with overflow:hidden;

CSS:

.detail{
  // existing styles
  vertical-align: bottom;
  overflow:hidden;
  white-space: nowrap;
}

.detail:after{
   content: "..........................................................";
} 

Answer 2

You could use generated content for the dots...

We create the dot leaders with a ':before' pseudo-element attached to the LI elements. The pseudo-element fills the whole width of the list item with dots and the SPANs are put on top. A white background on the SPANs hides the dots behind them and an 'overflow: hidden' on the UL ensures the dots do not extend outside the list: (from this w3.org article )

FIDDLE

Markup

<ul class="outer">
    <li><a href="#">Some detail for you</a><span>50.43</span></li>
    <li class="nested">
        <ul class="inner">
            <li><a href="#">Nested item 1</a><span>12.50</span>
            </li>
            <li><a href="#">Nested item 2</a><span>5.60</span>
            </li>
        </ul>
    </li>
    <li><a href="#">Another detail</a><span>3</span></li>
</ul>

CSS

ul
{
    list-style: none;
    padding: 0;
    overflow-x: hidden;
}
.outer {
    width: 70%;  
}
.inner
{
    padding-left: 20px;
}
li:not(.nested):before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "
}
li a:first-child {
    padding-right: 0.33em;
    background: white
}
a + span {
    float: right;
    padding-left: 0.33em;
    background: white
}

Answer 3

A simple solution would be to break this into three containers - one for the "here is some detail" text, one for the dotted line, and one for the cost. Set your container div to display: table, and your three inner divs to display: table-cell. Then you can style the middle div to have the dotted bottom border, and the display setting will allow the individual divs to expand and contract with the length of the content. You will need to set a min-width in percent for the middle column.

HTML:

<div class="container">

<div class="itemDetail">Item description of varying length</div>

<div class="dottedBorder"></div>

<div class="totalCost">$12.50</div>

</div>

CSS:

.container {
    width: 300px; 
    height: 20px; 
    background-color: red; 
    display: table;
}

.itemDetail {
    background-color: blue; 
    display: table-cell;
    vertical-align: bottom;
}

.dottedBorder {
    background-color: white;
    display: table-cell;
    border-bottom: 2px dotted #000000;
    min-width: 33%;
}

.totalCost {
    background-color: yellow;
    display: table-cell;
    vertical-align: bottom;
}

Edit: added fiddle: http://jsfiddle.net/hoppergrass/D9VbP/

Answer 4

I have tweeked your JS Bin:

JS Bin

It uses a horizontally repeated background image across the detail DIV and covers it over the detail text with a SPAN. You may figure out a new image for background... :-)