为何<textarea>中white-space:normal属性未按预期生效？

问题原因 #

你遇到的问题是因为Chrome等现代浏览器对<textarea>元素默认设置了white-space-collapse: preserve属性，这个CSS新属性的优先级高于传统的white-space属性，导致你设置的white-space: normal无法生效——white-space-collapse: preserve会强制保留所有空格、换行符等空白字符。

而你的<p>标签能正常合并空格，是因为浏览器没有给p标签设置这个默认的white-space-collapse: preserve规则。

解决方案 #

给<textarea>明确添加white-space-collapse: collapse属性，就能让white-space: normal的合并空白效果正常工作。修改后的代码如下：

<div>
    <label style="display: block;" for="textarea6">white-space: normal</label>
    <textarea id="textarea6" name="textarea6" rows="5" cols="33" style="white-space: normal; white-space-collapse: collapse;">j jj  jjj </textarea>
    <p style="white-space: normal;">j jj  jjj </p>
</div>

补充说明 #

white-space-collapse是CSS Text Module Level 4新增的属性，用来单独控制空白字符的折叠规则，它的优先级高于white-space（因为white-space是包含空白折叠、换行处理等的复合属性）。当你同时设置white-space: normal和white-space-collapse: collapse时，空白字符会按照预期合并为单个空格，同时文本会自动换行。

内容的提问来源于stack exchange，提问作者yongnisang