HTMLのtextareaタグで記述されるテキストボックスでワードラップを禁止する設定を紹介します。
HTMLのtextareaタグのテキストボックスで、デフォルトではテキストの自動折り返しが有効になっています。
この設定をオフにして、ワードラップを禁止する場合は textarea タグの wrap属性を設定します。
<textarea wrap="off">...</textarea>
| 値 | 意味 |
|---|---|
| soft | 改行を追加しません。 (入力された値の改行がすべて CR+LF のペアであることは保証します) |
| hard | 自動的に改行 (CR+LF) を挿入し、各行がコントロールの幅より長くならないよう折り返します。cols属性を指定する必要があります。 |
| off (非標準) | 外観を white-space: pre に変更します。 cols を超えた部分は折り返されず、水平方向にスクロール可能になります。 |
softとhardはサーバーに送信される際の改行コードの扱いが異なります。
| 値 | ブラウザの表示 | サーバー送信データ |
|---|---|---|
| wrap="soft" | 見た目のみ折り返し表示 | 改行なし |
| wrap="hard" | 見た目でも折り返し表示 | 実際に改行を含む |
| wrap="off" | 折り返しなし（横スクロール） | 改行なし |
<textarea name="textBox" cols=80 rows=20 wrap="off">文字列</textarea>
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>textareaのワードラップ</h2>
<textarea name="textBox" cols=64 rows=20 wrap="off">文字列</textarea>
</body>
</html>
上記のページを表示します。下図のページ画面が表示されます。
長い文字列を入力するとテキストボックスの幅で自動的に改行されて表示されます。
長い文字列を入力するとテキストボックスの幅で自動的に改行されて表示されます。
wrap="off"の場合は、長い文字列を入力するとテキストボックスに横スクロールバーが表示され、改行されずに表示されます。
