javascript - 文本显示在一行中

标签 javascript html css

我有一个上传文件的表单。文件上传后,我制作了一个函数来显示上传文件中的文本。

但是,当文本呈现时,它会显示在一行中。如何让它以多行显示?

function loadFileAsText() {
  var fileToLoad = document.getElementById("fileToLoad").files[0];

  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent) {
    var textFromFileLoaded = fileLoadedEvent.target.result;
    document.getElementById("inputTextToSave").value = textFromFileLoaded;
  };

  fileReader.readAsText(fileToLoad, "UTF-8");
}
#inputTextToSave {
  height: 500px;
  width: 500px;
  text-align: left;
  font-size: 8pt;
  white-space: nowrap;
  line-height: 10pt;
}
<html>

<head>
</head>

<body>

  <tr>
    <td>Select a File to Load:</td>
    <td><input type="file" id="fileToLoad"></td>
    <td><br><br><button onclick="loadFileAsText()">Load Selected File</button>
      <td>
        <td>
          <div><input type="text" id="inputTextToSave"> </div>
  </tr>
</body>

</html>

最佳答案

input 元素只能用于单行数据。也许您想使用 textarea 元素:

<textarea id="inputTextToSave" rows="4" cols="50"></textarea>

关于javascript - 文本显示在一行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48611960/

相关文章:

javascript - 页面加载状态

javascript - setAttribute 无法正常工作。

php - 为什么我的子主题不使用新的 style.css 文件?

CSS字体跨浏览器兼容性

css - 转换:translateY(-50%) 在 Safari 中不起作用

javascript - 有什么理由不使用 ES6 类?

javascript - Node 和 Sequelize 新手,并获得 "Unhandled rejection TypeError: Vacation.create is not a function"

javascript - Firebug 扩展 context.sourceCache.load(href) 返回 'Reload the page to get source for: http://'

html - CSS:<tbody> 宽度比 <table> 宽度宽。文本不换行

css - Chrome 打印网站,缺少布局选项