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

Question

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

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

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

Answer 1

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

Answer 2

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

Answer 3

Разбить длинные слова на ширину текстовой области:

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);

Answer 4

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

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

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

и Опера.

Answer 5

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

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

Answer 6

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

Answer 7

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

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