Enter/Return 键不移动到 textarea 中的新行答案

【问题标题】：Enter/Return key not moving to new line in textareaEnter/Return 键不移动到 textarea 中的新行
【发布时间】：2017-05-15 21:55:43
【问题描述】：

按下回车键时，我似乎失去了默认的 textarea 行为。我希望该按键将光标移动到下一行，但它只是插入了几个空格。一定是我的css规则中的东西，但我不知道它是什么。

button, input, textarea, select {
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #3b3b3b;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    padding: 0.2em 0.4em;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-width: 1px;
    border-style: solid;
    border-color: #d4d4d4;
    background: #fff;
}
textarea {
    height: 8em;
    vertical-align: top;
    overflow: auto;
}

&lt;textarea id="Textarea1" placeholder="Text area"&gt;&lt;/textarea&gt;

【问题讨论】：

在 mac 上的 chrome 中对我来说似乎没问题
你用的是什么浏览器？是否有任何 css 规则被继承？
@bdkopen 不，你可以看到上面嵌入的sn -p 可以看到没有css规则被继承。我在 Mac 上使用 Safari。
@JROB 看起来像 white-space: nowrap - 在 textarea 中有什么意义？
相信这是一个客户端问题。

标签： html css

【解决方案1】：

删除第 14 行的white-space: nowrap;。

【讨论】：

【解决方案2】：

更新：我发现 textarea 的默认行为是white-space: pre;，所以我更新了我的 CSS 规则如下，现在它工作正常：

button, input, textarea, select {
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #3b3b3b;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    padding: 0.2em 0.4em;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-width: 1px;
    border-style: solid;
    border-color: #d4d4d4;
    background: #fff;
}
textarea {
    height: 8em;
    vertical-align: top;
    overflow: auto;
    white-space: pre;
}

&lt;textarea id="Textarea1" placeholder="Text area"&gt;&lt;/textarea&gt;

【讨论】：