Стройное поле фиксированной длины

Я разрабатываю приложение Svelte; и в этом случае я хочу отобразить несколько строк с 5 полями. Одно из полей содержит описание, и, чтобы выделить это поле, я хочу дать ему фиксированную длину.

Я пробовал эту функцию JavaScript:

const fixLen = str => {
    let l = str.length;
    let s2 = "                    "; // 20 spaces
    let s3 = str + s2.substring(1, 21 - l);
    console.log(s3, s3.length);
    return s3;
  };

В Svelte:

{#each records as record}
  <div>
    {record.date} {fixLen(record.desc)} {record.ref1} {record.accNo}
    {record.amount.toFixed(2)}
  </div>
{/each}

В надежде, что все поля описания теперь будут иметь одинаковую длину. Но это не работает! Результатом являются эти 2 строки:

140318 ddddd ddddddd CK9730 7630 200.00
140318 dddd CK9731 7650 300.00

Буквы d - это описания.

Что я делаю неправильно? У кого-нибудь есть решение?

Спасибо!


javascript svelte-3
person Ad Rienks    schedule 01.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо того, чтобы полагаться на JavaScript, вы можете сделать это с помощью CSS, заключив это одно поле в диапазон и установив для него ширину 20 символов.

<style>
    span { display: inline-block; width: 20ch; }
</style>

{#each records as record}
  <div>
    {record.date} <span>{record.desc}</span> {record.ref1} {record.accNo} {record.amount.toFixed(2)}
  </div>
{/each}

С точки зрения чистой семантической разметки похоже, что вы создаете какую-то таблицу, и в этом случае, я полагаю, было бы лучше использовать таблицу.

person Stephane Vanraes    schedule 14.01.2020
comment
Действительно; использовать стол лучше. - person Ad Rienks; 15.01.2020