Разрыв строки в текстовом поле ⇐ Html

[Anonymous]

Я хочу создать текстовое поле со следующими требованиями:

• ширина: 16 столбцов (символов)
• высота: 3 строки
• макс. символов: 48
• строки всегда должны разрываться после 16 символов, независимо от того, какой символ был введен

Лучшее, что я придумал вот это решение:

Код: Выделить всё

    .text-input {
font-family: monospace;
font-size: 2em;
border: 1px solid black;
resize: none;
padding: 0.4em;
width: calc(1ch * 16);
height: calc(1.4em * 3 + 2px);
white-space: break-spaces;
word-break: break-all;
}

Код: Выделить всё

1234567812345678
1234567812345678 
this is some random text

Однако я столкнулся с проблемой. Если введены ровно 16 символов, за которыми следует пробел, последние два символа (в моем примере 8 и пробел) переходят на следующую строку (см. среднее поле в jsfiddle). Я хочу, чтобы «8» (16-й символ) оставался в первой строке, а пробел (17-й символ) переносился на следующую строку. Эта проблема возникает в большинстве браузеров, однако Firefox 147.0.2 работает корректно.
Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/798 ... in-textbox