JS - создавать пробелы в строке, пока она не получит определенную ширину

Question

У меня есть тег выбора в html, к которому я добавляю опции в javascript / jquery.

Проблема в том, что контент является динамическим c, его цена соответствует процентам.

Мне бы хотелось, чтобы сумма цены была слева, а процент - справа, но я не могу понять, как это сделать.

В этом случае я создал жестко запрограммированные пробелы. Это выглядит довольно странно, как вы можете видеть:

Есть ли способ перебросить второй столбец полностью вправо и сохранить его выровненным ?

Спасибо.

Answer 1

Вот возможное решение с использованием моноширинного шрифта:

const wordPairs = [
  ['hello', 'world'],
  ['hello', 'there!'],
  ['why', 'hello!!!'],
  ['hey', 'bro'],
  ['hi', '...']
];
const maxChars = Math.max(...wordPairs.map(pair => pair.join('').length));
const minDistance = 5;
const targetLength = maxChars + minDistance;
const select = document.getElementById('select');
for (const pair of wordPairs) {
  const option = document.createElement('option');
  const texts = [pair[0], '', pair[1]];
  while (texts.join('').length < targetLength) {
    texts[1] += String.fromCharCode(160);
  }
  option.innerHTML = texts.join('');
  select.appendChild(option);
}

<select id="select" style="font-family: monospace">
</select>

Answer 2

Если вы использовали такой шрифт, как Ariel, где все буквы и пробелы одинаковы, вы можете просто посчитать количество символов и добавить необходимый интервал. Вам нужно знать ширину выделения - ширину левых слов - ширину правых слов