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

Question

Элементы Html Textarea переносятся только тогда, когда они достигают пробела или символа табуляции.Это нормально, пока пользователь не наберет достаточно длинное слово.Я ищу способ строго обеспечить разрывы строк (например:даже если это приведет к «оооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооong»).

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

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

Answer 1

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

Answer 2

• На сайте quirksmode.org есть обзор различных методов.
• Есть связанный вопрос SO: «Как в 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, который поддерживается как минимум

Fire Fox, http://developer.mozilla.org/En/HTML/Element

Интернет Эксплорер, http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx

и Опера.

Answer 5

Я протестировал <wbr>, &#8203; и ­ техники.Все три хорошо работали в IE 7, Firefox 3 и Chrome.

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

Answer 6

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

Answer 7

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

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