2

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

在苗条：

{#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 是描述。

我究竟做错了什么？有没有人有办法解决吗？

谢谢！

4

1 回答 1

1

您可以使用 CSS 将一个字段包装在一个 span 中并将其宽度设置为 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}

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

于 2020-01-14T06:11:30.890 回答