8

I'm trying to figure out how to automatically fill space between two objects. I have menu items and prices.

The goal is something like this:

Burger..........................$9.99
Steak and Potato.........$14.99
Mac and Cheese.........$6.99

The spacing between menu item and price should be the same. Users can enter the menu item and price and I need to fill in any space.

This is what I've tried but it doesn't quite work:

.inLine {
  display: inline-block;
}
 <h1 class='inLine menuItem'> Burger </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $9.99 </h3> 
<br>
<h1 class='inLine menuItem'> Steak </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $14.99 </h3>

<h1 class='inLine menuItem'> Mediterranean Chopped Salad </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $14.99 </h3>

The issue is the dots need to take up the correct amount of space regardless of how long the item name is. I've tried setting the dots to width: 100% but that does not seem to do it. Any ideas?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
AndrewLeonardi
  • 3,351
  • 9
  • 47
  • 100
  • 2
    Looks like someone has already solved this: http://stackoverflow.com/questions/3097851/fill-available-spaces-between-labels-with-dots-or-hyphens – AndrewLeonardi Sep 11 '16 at 16:15

3 Answers3

21

section {
  display: flex;                     /* 1 */
  align-items: baseline;             /* 2 */
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;                          /* 3 */
  overflow: hidden;                 /* 4 */
}
<section>
  <h1> Burger </h1>
  <span>..............................................................................................................................................................</span>
  <h3>  $9.99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  $14.99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  $14.99 </h3>
</section>

Notes:

  1. Establish flex container.
  2. Align all elements vertically to baseline.
  3. Dots will consume all available space on the line. This will force the menu item and price to opposite ends of the container.
  4. Any extra dots are clipped off-screen.

You can easily control the distance between the menu items and the price by adjusting the width of the container. In the example above, the width is set to 100% (the default for block-level elements).

Of course, having so many dots in your span elements is quite ugly. But this is a basic example. You could try using a pseudo-element or scripting a loop instead.

OR, you could try using a dashed or dotted border.

section {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;
  border-bottom: 2px dotted #333;
<section>
  <h1> Burger </h1>
  <span></span>
  <h3>  $9.99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span></span>
  <h3>  $14.99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span></span>
  <h3>  $14.99 </h3>
</section>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Thanks for the help! – AndrewLeonardi Sep 11 '16 at 17:00
  • 1
    This is a great answer! After some fiddling, I'd like to add, that if anyone wants to change the spacing of your dots, `letter-spacing: 5px;` for example, might be a good start. Setting the `font-size` in the span as well may help (for me, the default dots were way too small and close together for my liking). – Doomd Jan 17 '20 at 07:35
0

You might try flexbox. Fill the middle with an unnecessary amount of dots, turn word-break off, and have overflow-x: hidden.

micah
  • 7,596
  • 10
  • 49
  • 90
0

 
h1.menuItem {
  position: relative;
  display: inline-block;
  width: 350px;
  font-size: 14px;
  text-align: justify;
  text-align-last: justify;
  border-bottom: #000000 dotted 2px;
  background: #ffffff;
}
span.good-name {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  position: absolute;
  left: 0;
  bottom: -5px;
  background: inherit;
  padding-right: 5px;
  text-align: left;
  text-align-last: left;
  -moz-text-align-last: left;
}
span.price {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  background: inherit;
  position: absolute;
  right: 0;
  bottom: -5px;
  padding-left: 3px;
  text-align: left;
  text-align-last: left;
  -moz-text-align-last: left;
  width: 50px;
}
 <h1 class='inLine menuItem'>
            <span class='good-name'>Burger</span>
            <span class='price'>$9.99</span>
        </h1>
Борис Никитюк
  • 1
  • 2