javascript - 从保存的文本区域 react 显示换行符

标签 javascript reactjs textarea

使用 Facebook React。 在设置页面中,我有一个多行 textarea,用户可以在其中输入多行文本(在我的例子中是一个地址)。

<textarea value={address} />

当我尝试显示地址时,例如 {address},它不显示换行符并且全部在一行中。

<p>{address}</p>

有什么解决办法吗?

最佳答案

没有理由使用 JS。您可以使用 white-space 轻松告诉浏览器如何处理换行符CSS 属性:

white-space: pre-line;

pre-line

Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

查看此演示:

<style>
  #p_wrap {
    white-space: pre-line;
  }
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
  textarea.addEventListener('keypress', function(e) {
    p_standard.textContent = e.target.value
    p_wrap.textContent = e.target.value
  })
</script>

browser support

关于javascript - 从保存的文本区域 react 显示换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36260013/

相关文章:

javascript - 无法从前端 JavaScript 访问跨源响应 header

javascript - 当文本和文本区域为空时禁用/启用按钮

javascript - 如何在文本区域内预格式化

javascript - JS : search for specific string in textarea

reactjs - React/Recoil - setAtom 新值何时可用?

php - 如何在 php 中处理来自表单的未知数量的项目

javascript - 使用 document.getElementsByTagName 进行 DOM 操作

javascript - JSON.parse 意外 token

javascript - 如何使用 vanilla JS 在多个元素上切换显示样式

javascript - 基于另一列聚合React中表中一列的值