CSS所有初始打破firefox newline in textareas

Question

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

https://jsfiddle.net/2bhzxdmg/

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

＆＃13;

＆＃13;

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

＆＃13;

<textarea></textarea>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过添加white-space: pre-wrap：

来解决此问题

  

浏览器保留了空格。文本将在必要时包装，   和在线休息。 （资源：   W3schools）

由于white-space的初始用户代理样式不同，Firefox中textarea 未保留 。

见下面的演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用浏览器的检查工具查看没有all:initial的默认样式 textarea的默认white-space属性为pre-wrap。所以，这就是解决方案。

＆＃13;

＆＃13;

textarea {
  all: initial;
  background: #fff;
  padding: 10px;
  border: solid 1px #ddd;
  white-space: pre-wrap;  /* here you go. */
}

＆＃13;

<textarea></textarea>

＆＃13;

＆＃13;

＆＃13;