javascript - 使用 JS/Jquery 渲染 .txt 文件中的内容时在单词之间添加空格

Question

我正在尝试在 div 中显示 .txt 文件的内容。但是，我想在某些单词之间插入额外的空格。我知道直接使用 JS 编辑文件系统不是一个好主意。但是，有没有什么方法可以在网页中呈现单词时在单词之间添加空格。

我的 HTML:

<div id= "show-content"></div>

JQuery 代码:

function readFile() {
    $.get('data.txt', function(txt) {
        console.log(txt)
        $("#show-content").load("data.txt");
     }, 'text');
}

我的文本文件(data.txt)看起来像:

Blaine Nemec
Alphonse Smither
Lon Garrick
Rob Hennings
Erin Tatham
Stefan Stacks
Allen Dang
Rolf Aultman
Jeff Christenson
Mohamed Croswell
Ambrose Mina
Rhett Jahnke

显示列表正确。但是，我想在每个名称后添加一些额外的空格。如果无法编辑 .txt 文件，是否可以在 CSS 或 JS/JQuery 中实现此目的。我搜索了几个与编辑文件相关的堆栈溢出问题，但没有一个是 JavaScript 的，无法帮助我解决。

编辑:我尝试在 .txt 文件中的每个名称后面添加 3 或 4 个额外空格，具体取决于字体系列。

Answer 1

您可以使用 .split() 方法拆分 .txt 单词，然后对其进行样式化。

类似这样的事情:

function readFile() {
    $.get('data.txt', function(txt) {
        console.log(txt)
        myWords = txt.split("\n");
        for (word of myWords) {
          $("#show-content").append("<span class="beautyWord">" + word + "</span>")
        }
     }, 'text');
}

然后使用 margin-left: 5px 等样式化 css 中的 beautyWord 类