web-dev-qa-db-ja.com

テキスト領域のラベルテキストの折り返し

画像に示されている形式でテキスト領域のラベルのサイズを変更したいのですが、段落タグを使用してワープを実行しようとしていますが、実際には起こりません。

私のコード..。

 <label for="qual">This is the format i want the text-area to be displayed:</label>  
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>

望ましい出力..

photo png image

htmlcssformslayout
11
Lucy
style="max-width: 140px; Word-wrap: break-Word"

これをラベルタグに配置し、必要に応じて最大幅または最小幅を調整します。ヘッドアップがIEで機能しない

13
GertV

white-space: normal;をお試しください

詳細については http://www.w3schools.com/cssref/pr_text_white-space.asp をご覧ください。

7
Bandula Dharmadasa

これが Solution です。

HTML：

<label for="qual" class="abc">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>

CSS：

.abc{float:left; width:125px; text-align:left; margin-right:30px;}

クラスを作成したくない場合は、CSSのlabelにスタイルを適用できます。

お役に立てれば。

6
Nitesh

このようなもの：

label { 
  float: left; 
  width:120px;
  padding:10px 30px;
  font-weight:bold;
}

デモ

2
Xareyo

LabelタグでtextWrap = "true"属性を使用してみてください

例えば：

<Label text="A very long text like this should be wrapped to next line"  textWrap="true"></Label>
0
Sachidananda Naik

label要素とtextarea要素を、自己完結型の防弾スタイルでスタイル設定したいとします。

次のHTMLをお勧めします。

<div class="wrap">
    <label for="qual">This is the format...to be displayed:</label>
    <textarea id="qual" rows="5" cols="50" style="resize:none" 
              placeholder="Description and Qualification"></textarea>
</div>

次のCSSで：

.wrap {
    outline: 1px dotted blue; /* Just for demonstration... */
    overflow: auto;
}

.wrap label {
    outline: 1px dashed blue;
    float:left;
    width: 10em;
    margin-right: 1.00em;
}

親コンテナdiv.wrapを定義して2つの子要素を保持し、overflow: autoを指定して新しいブロックフォーマットコンテキストを生成します。

これを行うのは、フローティングラベルフィールドが、ページまたはフォームにある可能性のある他の隣接する要素に干渉しないようにするためです。これは、レスポンシブデザインを構築する場合に重要になることがあります。

<label>フィールドは左にフロートされるため、適切な幅を指定する必要があります。必要に応じて、余白、背景色、画像、パディングを適用して、必要なデザインを作成することもできます。

フィドル： http://jsfiddle.net/audetwebdesign/2sTez/

0
Marc Audet

HTMLのブロックに次を追加します。

<style>
  label { padding:5px; font-weight:bold; float:left; width:150px; }
</style>

上記のスタイル設定は、間隔も置き換えます。

<label for="qual">This is the format i want the text-area to be displayed:</label>  
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>
0
suspectus