web-dev-qa-db-ja.com

HTML入力ボタンのテキスト値を複数行に折り返す

type="button"属性を持つHTML入力要素の新しい行にテキストを移動するにはどうすればよいですか？

私は次のコードを持っています：

<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />

ボタンのテキスト値を2行で囲みます。 HTMLの次の行に入力してみました。期待どおりに機能しませんでした。

<input type="button" id="btnTexWrapped" value="I see this is a long 
sentence here." style="width: 200px;" />

white-spaceのすべてのオプションをwidth: 200px;を固定して使用してみましたが、それでも何も機能しません。

コントロールは変更されないので、長さ、幅、またはその他の値を静的に修正してもかまいません。

htmlbuttoninputword-wrap
13
RMN

これを試してください、あなたはそれが即座にどのように機能するかを見ることができます：

<input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">
16
daniel
white-space: normal;

うまくいくはず

22
Marián Zeke Šedaj

ボタンタグを使用できます

<button>これは<br/>ここに長い<br/>文があると思います。</ button>

14
Lokesh

4年後にこの質問を読んだ人のために、私はいくつかの明確な詳細を追加したいと思います。ロケシュの答えは正しいものですが（ではない受け入れられた答え）が、最初の質問は誰も対処していないHTMLの仕組みの誤解に基づいています。

HTMLは空白を意味する言語ではありません。つまり、改行はブラウザによって完全に無視されます。 HTMLコードに改行を入れて、読みやすく保守しやすいHTMLを書くことはできますが（そうすべきです！）、最終的な結果に（ほとんど）影響することはありません（ここでは例外は扱いません）。

ロケシュが示したように、<br />タグを使用して改行を強制できます。別の一般的な方法は、divやsectionなどのブロックレベルの要素を使用することです。

ブラウザーのUAスタイルシートによってブロックするようにいくつかの要素が設定されています。これらは通常、<div>、<section>、<ul>などのコンテナ要素です。また、<p>や<h1>のような「ブロック」のテキストを入力します。ブロックレベルの要素はインラインに配置されませんが、それらを超えます。デフォルトでは（幅を設定せずに）可能な限り水平方向のスペースを使用します。

これは https://css-tricks.com/almanac/properties/d/display/ からの引用です。これは、display属性のさまざまなプロパティに関する非常に優れたリファレンスです。

さらに、エンコードされた改行記号をvalue属性内に配置する必要がある他の提案されたソリューションの使用を試みることはお勧めしません。これにより、inputタグが設計されていた範囲を超えてプッシュされます。ボタンにもっと複雑なコンテンツが必要な場合は、buttonタグの方が適しています。実際、通常、buttonタグの代わりに<input type="button">を使用する十分な理由はないと思います。これは、よりセマンティックで読みやすく、無限の柔軟性を備えています。たとえば、中にブレークやその他の要素（画像など）を入れることができます。

ほんの少しの知識とプロのウェブ開発者からのいくつかの推奨事項... :)

5
corinnaerin

私のプロジェクトの1つでクロスタイプの要件が発生しました。以下のように解決しました。

hTMLエンコード文字列を使用

<input button type="submit" value="This is button &#x00A; two line text" />

&#x00A;

buttonタグのvalue属性のテキストを分割するため

これがお役に立てば幸いです。

2
Skomma