固定长度的Svelte字段

Question

我正在开发一个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}

希望所有描述字段现在都具有相同的长度。但是这不起作用！输出是以下两行：

140318 ddddd ddddddd CK9730 7630 200.00
140318 dddd CK9731 7650 300.00

D是描述。

我做错了什么？有人有解决方案吗？

谢谢!

Answer 1

您可以使用CSS将一个字段包装在一个跨度中，并将宽度设置为20个字符，而不是依赖JavaScript来完成此操作。

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

从纯语义标记的角度来看，它看起来像是在制作某种类型的表，在这种情况下，我认为使用表会更好。