Заполнить пространство между двумя текстовыми элементами с точками

Question

Я пытаюсь выяснить, как автоматически заполнять пространство между двумя объектами. У меня есть пункты меню и цены.

Цель-то вроде этого:

Burger .......................... $ 9,99
Стейк и картофеля ......... $ 14.99
Mac и сыр ......... $ 6.99

Расстояние между пунктом меню и ценой должно быть одинаковым. Пользователи могут ввести пункт меню и цену, и мне нужно заполнить любое пространство.

Это то, что я пытался, но это не совсем работа:

.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>

Проблема является многоточие необходимо занять правильное количество пространства независимо от того, как долго имя элемента. Я попытался установить точки на width: 100%, но это не похоже на это. Есть идеи?

Answer 1

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>

Примечания:

1. Создание гибкого контейнера.
2. Выровнять все элементы по вертикали до базовой линии.
3. Точки будут потреблять все свободное место на линии. Это заставит пункт меню и цену на противоположные концы контейнера.
4. Любые дополнительные точки отсекаются за пределы экрана.

Вы можете легко управлять расстоянием между пунктами меню и ценой, регулируя ширину контейнера. В приведенном выше примере ширина устанавливается равной 100% (по умолчанию для элементов уровня блока).

Конечно, имея так много точек в ваших элементах span довольно уродливо. Но это основной пример. Вместо этого вы можете попытаться использовать псевдоэлемент или создать скрипт.

ИЛИ, вы можете попробовать использовать dashed или dottedborder.

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>

Answer 2

Вы можете попробовать flexbox. Заполните середину ненужным количеством точек, отключите прерывание слова и получите overflow-x: hidden.

Answer 3

Это здесь сделано с чистым html и css.Copy разделенным классом элементом и добавляет все, что вы хотите.

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

<div class="item"> 
 
    <div class='descripcion'>Burger</div> 
 
    <div class='precio'>$9.99 </div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Steak and Potato</div> 
 
    <div class='precio'>$14.99</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Mac and Cheese</div> 
 
    <div class='precio'>$6.99</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Anything else</div> 
 
    <div class='precio'>1000rs</div> 
 
</div>

Answer 4

\t 
 
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>