CSS在textareas中所有初始中断firefox换行符

Question

all: initial设置时textareas中的换行符在Firefox中不起作用...

https://jsfiddle.net/2bhzxdmg/

一个如何解决这个问题的想法（我的意思是不要不使用all: initial...这很明显）？

textarea {
  all: initial;
  background: #fff;
  padding: 10px;
  border: solid 1px #ddd;
}

<textarea></textarea>

Answer 1

您可以通过添加white-space: pre-wrap以下内容来解决它：

空白由浏览器保留。文本将在必要时自动换行，并在换行符上显示。（来源： W3schools）

该white-space是不保留在Firefox，因为在最初的用户代理样式的差异textarea。

请参见下面的演示：

document.getElementById('sub').addEventListener('click', function() {
  console.log(document.getElementById('text').value);
})

textarea {
  all: initial;
  white-space: pre-wrap;
  background: #fff;
  padding: 10px;
  border: solid 1px #ddd;
}

<textarea id="text"></textarea>
<button id="sub">Get</button>