CSS在字符串末尾预换行换行符

Question

当在一个字符串的末尾插入一个应该具有whitespace: pre-wrap样式的元素的新行时，我预计会出现一个新行。

然而，似乎浏览器转换单个新行，并且只有在新行之后插入另一个字符时才会出现可见的新行：

<button id="btn">click to add new line</button>
<button id="btn2">click to add space</button>
<div id="cnt" style="width:500px; white-space: pre-wrap; border:1px solid black;">line</div>

以及插入新行和额外空格的javascript

(function() {
    var cnt = document.getElementById('cnt')
    document.getElementById('btn').onclick = function() {
        cnt.textContent = cnt.textContent + String.fromCharCode(10)
    }
    document.getElementById('btn2').onclick = function() {
        cnt.textContent = cnt.textContent + " "
    }
})();

为了方便展示https://jsfiddle.net/psimon/n9enuvn6/

任何人都可以指向我定义此行为的规范并且是否有已知的解决方法？尝试搜索，但到目前为止没有。

我发现我可以将换行符与新行一起插入，然后我只需要检查退格键并删除即可立即删除它们。

感谢您的任何指示