Remplissez l’espace entre deux éléments de texte avec des points

J’essaie de comprendre comment remplir automatiquement l’espace entre deux objects. J’ai des articles de menu et des prix.

Le but est quelque chose comme ça:

Burger …………………….. 9,99 $
Steak et pomme de terre ……. 14,99 $
Mac et fromage ……… 6,99 $

L’espacement entre l’élément de menu et le prix doit être identique. Les utilisateurs peuvent entrer l’élément de menu et le prix et je dois remplir n’importe quel espace.

C’est ce que j’ai essayé mais ça ne marche pas tout à fait:

.inLine { display: inline-block; }

   Burger 
  .....................  $9.99 
 
  Steak 
  .....................  $14.99 
  Mediterranean Chopped Salad 
  .....................  $14.99

Le problème est que les points doivent occuper la bonne quantité d’espace, quelle que soit la longueur du nom de l’élément. J’ai essayé de régler la width: 100% des points width: 100% mais cela ne semble pas le faire. Des idées?

 section { display: flex; /* 1 */ align-items: baseline; /* 2 */ margin-bottom: 10px; } section > * { padding: 0; margin: 0; } span { flex: 1; /* 3 */ overflow: hidden; /* 4 */ }

   Burger 
 ..............................................................................................................................................................  $9.99 
 
   Steak 
  ..............................................................................................................................................................  $14.99 
 
   Mediterranean Chopped Salad 
  ..............................................................................................................................................................  $14.99

Vous pourriez essayer flexbox. Remplissez le milieu avec une quantité inutile de points, désactivez le saut de mot et faites overflow-x: hidden .

 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; }

   Burger $9.99

Ceci est fait ici avec les éléments html et css.Copy div classés et ajoutez ce que vous voulez.

 .item { display: flex; justify-content: space-between; } .descripcion { /*background-color: green;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .descripcion:after { content: " ..........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................." } .precio { /*background-color: red;*/ flex-shrink: 0; }

  Burger
 $9.99 
 
  Steak and Potato
 $14.99
 
  Mac and Cheese
 $6.99
 
  Anything else
 1000rs