Атрибут wrap тега <textarea> — перенесення рядків

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

<textarea wrap="soft|hard">

Атрибут wrap може отримувати 3 значень:

soft

Текст, який виходить за межі текcтового поля, буде автоматично перенесено на наступний рядок. На сервер текст буде передаватись як один рядок.

автор: NagarD

правити

hard

Текст, який виходить за межі текcтового поля, буде автоматично перенесено на наступний рядок. На сервер текст буде передано із місцями автоматичного переносу. При цьому має бути присутній атрибут cols.

автор: NagarD

правити

off

Нестандартне значення. Перенесення рядків вимкнено. При введенні довгого тексту без перенесень, він друкуватиметься в один рядок, при цьому буде відображатися смуга прокрутки.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	16	4	6	≤12.1	12	≤6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	6

Приклади

+ запропонувати свій приклад у пісочниці

<form>
  <p>Приклад використання атрибуту wrap, коли він приймає значення "hard"</p>
   <p><textarea rows="3" cols="20" wrap="hard"></textarea></p>
<p><input type="submit" value="Надіслати"></p><br><br>
    <p>Приклад використання атрибуту wrap, коли він приймає значення "off"</p>
  <p><textarea rows="3" cols="20" wrap="off"></textarea></p>
   <p><input type="submit" value="Надіслати"></p>
  </form>

<p>1. <code>wrap="soft"</code> — типова поведінка, рядок переноситься:</p>
<textarea cols="34" rows="3" wrap="soft">Один дуже довгий рядок без жодного переносу, який не вміщається у ширину поля.</textarea>

<p>2. <code>wrap="off"</code> — нестандартне значення: переносу немає, є прокрутка вбік:</p>
<textarea cols="34" rows="3" wrap="off">Один дуже довгий рядок без жодного переносу, який не вміщається у ширину поля.</textarea>

<p>3. Те саме стандартно, через CSS:</p>
<textarea cols="34" rows="3" class="nowrap">Один дуже довгий рядок без жодного переносу, який не вміщається у ширину поля.</textarea>

<p class="note">А ось <code>hard</code> у полі виглядає точнісінько як <code>soft</code>: він міняє лише те, що поїде на сервер — туди додаються справжні переноси рядків.</p>

p { margin: 0 0 8px; }
textarea { font: 15px/1.5 ui-monospace, monospace; margin-bottom: 14px; }
.nowrap { white-space: pre; overflow-x: auto; }
code { background: #f2f2f2; padding: 0 3px; }
.note { border-left: 3px solid #c00; padding-left: 10px; color: #444; }