input type =“ text”要素内のテキストの折り返しHTML / CSS

以下に示すHTMLは、

<input type="text"/>

次のようにブラウザに表示されます。

速い茶色のキツネは怠惰な犬を飛び越えました。

以下のHTMLを使用して、

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

次のようにブラウザに表示されます。

それがtextarea'の仕事です-複数行のテキスト入力の場合。それinput をしません; それを行うように設計されていません。

したがって、を使用しtextareaます。視覚的な違いに加えて、JavaScriptを介して同じ方法でアクセスします（valueプロパティを使用）。

inputイベントを介して、単にreplace(/\n/g, '')。を使用して改行が入力されるのを防ぐことができます。

ワードブレイクは意図の一部を模倣します

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }

<input type="text" value="The quick brown fox jumped over the lazy dog" />

回避策として、このソリューションは一部のブラウザーでその効果を失いました。デモを確認してください：http：//cssdesk.com/dbCSQ

入力を使用することはできません。代わりにtextareaを使用する必要があります。wrap="soft"コードでtextareaを使用し、オプションで次のような残りの属性を使用します。

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

属性：テキストの量をたとえば「40」文字に制限するには、次のmaxlength="40"ような属性を追加できます<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> 。スクロールを非表示にするには、スタイルをスクロールします。あなただけ使用している場合overflow:scroll;かoverflow:hidden;、またはoverflow:auto;それが唯一のスクロールバーのために有効になります。スクロールバーごとに異なる属性が必要な場合overflow:scroll; overflow-x:auto; overflow-y:hidden;は、スタイル領域で次のような属性を使用します。textareaのサイズを変更できないresize:none;ようにするには、次のようなスタイルを使用できます。

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

このようにして、入力テキストボックスとまったく同じように機能するが、入力テキストを使用せずに行を使用する、ワードラップと最大文字長「40」文字の14行10列のテキストエリアを作成または例証できます。

注： textareaは、行<input type="text" name="tbox" size="10"></input>をまったく処理しないように作成された入力とは異なり、行を処理します。

内部の値が1行の文字列であるが、単語でラップされた形式でユーザーに表示されるテキスト入力を作成するには、または他の要素でcontenteditable属性を使用できます<div>。

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}

<div contenteditable></div>