Пробелы, исчезающие в textarea?

Question

Взгляните на этот пример: http://jsfiddle.net/DerekL/a7bUx/

Я создал 2 textarea с с различными настройками CSS с помощью .val. Затем я установил 2 textarea s с тем же значением, оба с 4 пробелами спереди. Тем не менее, тот, у которого есть настройки CSS, кажется, «удалил» эти пробелы. Зачем?

Не думаю, что white-space: nowrap; повлияет на это, потому что даже вы нажимаете Ctrl + A, чтобы выделить все и вставить его в текстовый процессор, пробелы все еще отсутствуют.

я проверил на Chrome и другим Webkit на основе браузера. Тот же результат.

Answer 1

Вместо использования whitespace: no-wrap;

Попробуйте использовать

white-space: pre; 

Whitespace сохраняется в браузере. Текст будет только обтекать разрывы строк. Действует как тег <pre> в HTML.

Обновления:

От ваших комментариев, вы должны пойти с wrap="off" атрибутом.

Также хотел бы, чтобы пройти через Textarea Tricks и обратитесь

Nowrap раздел:

Чтобы предотвратить текст от упаковки обычно в CSS, вы используете white-space: nowrap. Но по какой-то причине это не работает с текстовыми областями. Если вы хотите, чтобы иметь возможность ввести в прокручиваемые и предпочли бы линии не ломаются, пока не будет нажата клавиша возврата/ввод (горизонтальная полоса прокрутка срабатывает вместо этого), вам придется использовать обертку = «выключен» атрибут.

Вот fiddle

Answer 2

white-space: nowrap; Избегайте Установите этот флажок fiddle в хроме. это будет работать

Вы можете использовать javscript и regular expression для removing trailing white spaces. Образец fiddle.Я думаю, что это поможет вам

Answer 3

Согласно этой статье от CSS-Tricks:

Обратите внимание, что и в примере HTML кода в верхней части этой статьи, есть на самом деле две разрывы строк, один перед строкой текста и один после, , которые позволяют использовать текст в собственной строке (в коде). Когда текст отображается в браузере, эти разрывы строк выглядят так, как если бы они были удалены . Также вырезаны лишние пробелы одна строка перед первой буквой. Если мы хотим заставить браузер отображать эти разрывы строк и лишние символы пробела, мы можем использовать white-space: pre;

Таким образом, white-space: pre будет хранить пробелы.

Кроме того, из MDN:

Последовательности пробельных сохраняются, линии прерываются только на символы новой строки в источнике и в <br> элементов.