javascript - 如何使文本文件在获取并添加到 div 时具有相同的布局

Question

我对编码还是很陌生，我刚刚开始使用 Fetch 和 Ajax 并练习我正在构建一个应用程序，该应用程序从本地文件夹中获取一本书的 txt 文件并将其显示在网页上的 div 中.

我遇到的问题是，我构造为易于阅读的文本文件作为一个纯文本 block 出现。

这就是我现在没有 stringify 或 split 或 splice 的情况:

function getText() {
  fetch('aliceinwonderland.txt')
  .then(function(response){
    return response.text();
  })
  .then(function(myBook) {
    let text = myBook;
    document.getElementById('book_section').innerHTML = text
  })
}

我查看了 json.stringify，它为我提供了文本 block ，但也使换行符 (\n) 可见并且不放置新行。

我还查看了 .split 和 .splice，我仍在努力让它们发挥作用，但我确信必须有更好的方法来做到这一点。

我真正需要做的是让 txt 文件显示为文本文件中的内容，但现在它只是一个文本 block 。

Answer 1

空白

您可以使用 white-space: pre;在您的 CSS 中以遵循文本文件中格式化的 \n 字符和其他空格:

#book_section {
  white-space: pre;
}