Самый элегантный способ заставить элемент TEXTAREA к обертке, независимо от пробелов *

Элементы HTML-таблицы только обертывают, когда они достигают пробела или символа табуляции. Это нормально, пока пользователь не набирает looooooooooooooooooooooooong достаточно слова. Я ищу способ строго соблюдать разрывы строк (например: даже если это приводит к "loooooooooooo\n ooooooooooong" ).

Лучшее, что я нашел, - добавить в Unicode нулевую ширину после каждой буквы, но это разрывает операции копирования и вставки. Кто-нибудь знает лучший способ?

Примечание. Я имею в виду элемент "textarea" здесь (например, тот, который ведет себя аналогично текстовому вводу) - не просто обычный старый текст.

Ответ 1

Настройки CSS word-wrap:break-word и text-wrap:unrestricted кажутся функциями CSS 3. Удачи найти способ сделать это на текущих реализациях.

Ответ 2

quirksmode.org имеет обзор различных методов.
Есть связанный вопрос SO: В HTML, как сломать на тире?
В браузерах, которые его поддерживают, word-wrap: break-word может также дать желаемый эффект.

Ответ 3

Там нестандартный элемент wbr, который поддерживается как минимум

Firefox, http://developer.mozilla.org/En/HTML/Element

Internet Explorer, http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx

и Opera.

Ответ 4

Разрыв длинных слов в размере ширины textarea:

1) для современных браузеров:

textarea { word-break: break-all; }

2) для совместимости с IE8 добавьте:

textarea { -ms-word-break: break-all; }

https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx

3) добавить взлома совместимости IE11:

перенос слов в Internet Explorer 11 не работает

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, textarea { white-space: pre; } 
}

Этот код работает нормально:

-IE 11, Chrome 51, Firefox 46 (Windows 7);

-IE 8, Chrome 49, Firefox 18 (Windows Xp);

-Edge 12.10240, Opera 30 (Windows 10);

Ответ 5

Я тестировал методы <wbr> , & # 8203; и & shy;. Все трое хорошо работали в IE 7, Firefox 3 и Chrome.

Единственным, кто не нарушил копию/вставку, был тег <wbr> .

Ответ 6

Согласно моим тестам, только Firefox имеет описанное поведение среди текущих браузеров. Поэтому, я думаю, ваш лучший выбор - дождаться неизбежного выпуска Firefox 3.1, чтобы решить вашу проблему:)

Ответ 7

Самый элегантный способ - использовать wrap="soft" для обертывания целых слов или wrap="hard" для обертывания символом или wrap="off" для того, чтобы не обертывать вообще, хотя последний wrap="off" часто не нужен, поскольку автоматически используется браузер автоматически, как будто это было wrap="off".
Пример:

<textarea name="tbox" cols="24" rows="4" wrap="soft"></textarea>