CSS все начальные разрывов светлячок новая строка в прокручиваемом

Question

Newline в прокручиваемых не работает в Firefox, когда all: initial установлен ...

https://jsfiddle.net/2bhzxdmg/

идея, как решить эту проблема (я имею в виде не быть доном» t с использованием 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>

Answer 2

Используйте браузер инспектировать инструменты, чтобы увидеть, какие стили по умолчанию являются без all:initial.
По умолчанию white-space Недвижимость для textarea оказывается pre-wrap. Итак, это решение.

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

<textarea></textarea>