Adding a dotted line trail after menu description

Question

How would I go about adding a dynamic \"..........\" to a restaurant menu in CSS? Like in printed ones they have the whole \"our food is made of blah blah blah.............

Answer 1

Alex's answer has one great drawback — multiline text in the .food hides bottom line.

Also there is a good old answer: http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)

Here is live demo of a little modified old solution (try to resize): http://cssdesk.com/BqR96

And modified css:

.restaurant_menu__list {      
  min-width: 320px; /* For mobile devices */
  max-width: 500px; /* Custom max width for readbility */
}

.restaurant_menu__row {
  border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
  position: relative;
  float: left;
  line-height: 1.2em;  

  margin: -.9em 0 0 0;  
  width: 100%;

  text-align: left;  
}

.restaurant_menu__meal span
, .restaurant_menu__price
{
  background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}

.restaurant_menu__meal {
  padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}

.restaurant_menu__meal span {
  margin:0;
    position:relative;
    top: 1.6em;
    padding-right:5px; /* Custom number for space between text and dotted line */
}

.restaurant_menu__price {  
    padding:1px 0 1px 5px;
    position:relative;
    top:.4em;
    left:1px;/* ie6 rounding error*/
    float:right;
}

And modified html:

  

    
    
Crab Cakes with corn, roasted red pepper, and ginger vinaigrette
    €25
  

  

    
French Onion Soup
    €32