web-dev-qa-db-ja.com

入力type = "text"要素内のテキストのラッピングHTML / CSS

以下に示すHTML、

<input type="text"/>

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

素早い茶色のキツネは怠け者の犬を飛び越えました。

以下のHTMLを使用して、

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

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



htmlinputword-wrap
63
Web_Designer

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

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

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

48
alex

Word Breakは意図の一部を模倣します

input.break {
    Word-wrap: break-Word;
    Word-break: break-all;
    height: 80px;
}

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

39
Thiago Macedo

notに入力を使用できます。代わりにtextareaを使用する必要があります。 textareaをwrap="soft"codeで使用し、オプションで次のような残りの属性を使用します。

<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;のみを使用する場合、1つのスクロールバーにのみ影響します。各スクロールバーに異なる属性が必要な場合は、スタイル領域でこの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>

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

注： textareaは、入力<input type="text" name="tbox" size="10"></input>とは異なり、行で動作しますnot行で動作します.

7
SeekLoad

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

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>
1
Sam Herrmann