Svelte读取TXT文件后如何实现内容逐行显示（添加换行或分段）

你遇到的问题很常见——HTML 默认会把文本里的换行符 (\n) 当作普通空格处理，所以你的每行条目会挤在同一行。下面给你两种简单的解决思路，都能适配你的 Svelte 代码：

方法一：每行内容单独生成一个段落 #

这种方式更符合语义化，适合需要给每行单独设置样式的场景。我们可以把读取到的文本按换行符分割成数组，再遍历数组生成 <p> 标签，同时过滤掉可能的空行：

<input type='file' multiple bind:files> 
{#if files}
  <h2>Files selected: </h2>
  {#each Array.from(files) as file}
    <p>The imported file is: {file.name}</p>
    {#await file.text() then text}
      {#each text.split('\n').filter(line => line.trim() !== '') as line}
        <p>{line}</p>
      {/each}
    {/await}
  {/each}
{/if}

这里的 text.split('\n') 把整个文本拆成每行的数组，filter(line => line.trim() !== '') 是为了跳过文件里的空行（比如末尾可能存在的空行），避免生成多余的空段落。

方法二：用 <br> 替换换行符 #

如果不需要单独的段落，只是想让内容换行显示，可以把文本里的换行符替换成 <br> 标签，再用 Svelte 的 {@html} 指令渲染（因为默认情况下 Svelte 会转义 HTML 标签，直接写 <br> 会被当成文本显示）：

<input type='file' multiple bind:files> 
{#if files}
  <h2>Files selected: </h2>
  {#each Array.from(files) as file}
    <p>The imported file is: {file.name}</p>
    {#await file.text() then text}
      <p>{@html text.replace(/\n/g, '<br>')}</p>
    {/await}
  {/each}
{/if}

注意：使用 {@html} 时要确保文本内容是安全的（比如你自己上传的本地文件），避免 XSS 风险——不过你的场景是读取本地文件，所以不用担心这个问题。

另外顺便提一句，你的原代码里有个小笔误：bind:files' 多了个单引号，改成 bind:files 就可以正常绑定文件了。

内容的提问来源于stack exchange，提问作者Dorian