CSS для Textarea с макетом в стиле консоли

У меня есть текстовое поле, которое я хочу вести себя как приглашение консоли/cmd.exe. Я применил столбцы и строки для управления размером и следующие правила CSS:

 word-break: break-all;
white-space: break-spaces;

Код (разметка): использование свойств ширины и высоты также допустимо, но несовместимо в разных браузерах для элементов Textarea, во многом аналогично работе элементов

, но элементы

не имеют дополнительных характеристик, которые мне нужны.

Работает точно так, как я хочу в Firefox, но не в Chrome:

Firefox (работает так, как я хочу)

Chrome (НЕ работает так, как я хочу, обратите внимание, что «foo» — это слово, разбитое на 42 символа)

В Chrome проблема заключается в том, что оно разрывается в середине предыдущего слова того же размера, но, немного изменив этот размер, пробелы в предыдущей строке сохраняются и сворачиваются, а это НЕ то, чего я хочу.

• Мне нужны пробелы после того, как слово будет перенесено на следующую строку.
  
  
• Я хотел бы сделать это без необходимости заменять пользовательский текст Javascript или дополнительными элементами.
  
  
• В каждой строке должны отображаться все символы, особенно пробелы, в несвернутом виде.
  
  
• Каждая строка не может содержать более 43 символов, поэтому они должны переноситься на следующую строку без свертывания.
  
  
• Перенос строк НЕ должен происходить в середине предыдущего слова.
  
  
• Перенос строк НЕ должен переносить пробелы в последнюю строку, поскольку она превышает 43 символа.
  
  
• Переносы строк НЕ должны схлопывать пробелы.
  
  

В Chrome предыдущая строка не переносится в правильное место. Пользователю НЕ нужно нажимать ENTER, поэтому он должен автоматически переносить пробел на следующую строку, как в консоли.
https://www.webucate.me/textarea.htm

Как я могу сделать так, чтобы текстовое поле разрывалось на 43 символа, переносило \n новые строки и последовательно сохраняло пробелы на следующей строке?

Попробовал.

Тот же эффект.

Ваш код работает так, как мне хотелось бы, в Firefox, но не в Chrome. Это была хорошая идея.

Я поместил его в элемент , но тогда я не могу получить element.selectionStart или element.selectionEnd для своих слушателей, которые я использую для ограничения ввода x строк.

Боль в заднице, потому что мы должны учитывать общее количество символов новой строки \n, бла-бла-бла (это не связано), так что идея хороша, но многое ломается.

Учитывая, что поведение в каждом браузере разное, мне нужен другой подход, и у меня закончились идеи. Псевдоэлементы тоже пробовал.

Они не так хорошо работают в Textareas и Newlines, поскольку n всегда неизвестно. Это оказывается обманчиво сложной проблемой...

Попробовал комбинацию этих двух предложенных строк.

В результате в Chrome пробелы в начале строки схлопываются. Мобильная версия будет сильно отличаться и будет использовать страницу, совершенно независимую от той, над которой я работаю.

Это стиль для настольных компьютеров, подобных компьютерам в этом разделе. Ограничения возникают из-за того, что введенный здесь текст в конечном итоге отображается в элементе Canvas, с которым, как ни странно, было в тысячу раз проще работать.

Поэтому на этой странице он должен выглядеть так же, как и в моем отрендеренном выводе, который для меня постоянно противоречив.

Или. Я надеялся сделать это с помощью CSS, поскольку подход прослушивателя будет болезненным. Поверьте мне, я пытался... просто взгляните на слушателей, которые уже есть на странице примера, просто чтобы ограничить количество строк атрибутом "maxrows"...

Как насчет использования вместо этого contenteditable div? Но, возможно, это не то, что вы ищете.
https://jsfiddle.net/g8djstqf/1/

Что одинаково между FF и Chrome.

Просто помните, что в виде предварительно отформатированного текста все /r/n/t и multi-space сохраняются.

хотя, если вы пытаетесь использовать консольный ввод/вывод, это может быть именно то, что вам нужно.

/нуждаться.

«Сложная» часть заключается в том, чтобы на самом деле получить «43-й символ», поскольку на самом деле это не то значение, которое можно надежно установить в CSS, поскольку шрифты не имеют одинакового размера, а в немоноширинных шрифтах нет двух символов, имеющих одинаковую ширину.

Итак, вам нужно установить моноширинный шрифт, и даже в этом случае вам придется использовать веб-шрифт для обеспечения одинаковой ширины на разных платформах ОС.

Хотя это поднимает проблему адаптивности/мобильности, когда вам не следует пытаться исправить ширину таких вещей, как текстовые области.

В лучшем случае вы установите максимальную ширину.

Переключите слово прерывания на все слова. В этом случае вы видите, что FF НЕ реализует все функции должным образом. Поведение Chrome является правильным для того, что означает «все сломать».

Хм, интересно, что Chrome ведет себя правильно. Я не смог заставить НИЧЕГО работать в Chrome для меня... Мне бы очень хотелось, чтобы он не заботился о том, что это за персонаж, и просто переносился на 43-й символ, как в консоли...