Самый элегантный способ заставить элемент TEXTAREA переносить строку, * независимо * от пробелов
Элементы Html Textarea переносятся только при достижении символа пробела или табуляции. Это нормально, пока пользователь не наберет достаточно длинного слова. Я ищу способ строго соблюдать разрывы строк (например: даже если это приводит к «loooooooooooo \ n ooooooooooong»).
Лучшее, что я нашел, - это добавлять пространство юникода нулевой ширины после каждой буквы, но это нарушает операции копирования и вставки. Кто-нибудь знает способ лучше?
Примечание: здесь я имею в виду элемент «textarea» (т.е. тот, который ведет себя аналогично текстовому вводу), а не просто старый простой блок текста.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Есть нестандартный элемент wbr, который поддерживается как минимум
Firefox, http://developer.mozilla.org/En/HTML/Element
Internet Explorer, http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx
и Opera.
Ты прав. Но взгляните на исправления ... в это время не было упомянутого "текстового поля";)
- quirksmode.org имеет обзор различных методов.
- Есть связанный вопрос SO: "В HTML, как разбить слово на тире?"
- В браузерах, которые его поддерживают,
word-wrap: break-wordтакже может дать желаемый эффект.
Я тестировал техники <wbr>, & # 8203; и &застенчивый;. Все три хорошо работали в IE 7, Firefox 3 и Chrome.
Единственный, который не сломал копирование / вставку, был тэг <wbr>.
afaik, вы не можете вставлять элементы html внутри текстового поля, так что это не сработает
Параметры CSS word-wrap:break-word и text-wrap:unrestricted выглядят как функции CSS 3. Удачи в поиске способа сделать это в текущих реализациях.
только что понял, что Facebook довольно хорошо справляется со своими формами, мне нужно зайти туда и посмотреть, что они делают. Либо так, либо подождать, пока браузеры поддержат упомянутые вами атрибуты - мне трудно тратить тысячу строк javascript на то, что в конечном итоге будет так просто
Это ненадолго (да, да, да, да)! Новые функции разработчика в Firefox 3.1 «перенос слов: это недавно поддерживаемое свойство позволяет содержимому указывать, могут ли строки быть разорваны внутри слов, чтобы предотвратить переполнение, когда неразрывная строка слишком длинна, чтобы поместиться в одной строке».
Отлично! Я рад, что все идет быстро; это такая глупая функция, без которой нельзя обойтись.
Согласно моим тестам, среди текущих браузеров только Firefox имеет описанное поведение. Так что я думаю, вам лучше всего дождаться скорого выпуска Firefox 3.1, который решит вашу проблему :)
Разбиение длинных слов на ширину текстового поля:
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);
word-break: break-all сделал это! Tyvm
Самый элегантный способ - использовать wrap = "soft" для переноса целых слов или wrap = "hard" для переноса по символам или wrap = "off" для того, чтобы не переносить вообще, хотя последний wrap = "off" часто не нужен, поскольку браузер автоматически использует его, как если бы он был wrap = "off".
ПРИМЕР:
<textarea name = "tbox" cols = "24" rows = "4" wrap = "soft"></textarea>
afaik, вы не можете вставлять элементы html внутри текстового поля, так что это не сработает