Word-Wrap von Label-Text in Text-Bereich

Question

Ich möchte die Bezeichnung eines Text-Bereich in Format im Bild Größe ändern. Ich versuche, worp mit Absatz-Tag tun, aber es geschieht nicht ..

meinen Code ....

<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> 

gewünschte Ausgabe ..

Answer 1

Etwas wie folgt aus:

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

Demo

Answer 2

Hier ist die Solution.

Die 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> 

Die CSS:

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

Wenn Sie nicht wollen, um eine Klasse zu erstellen, können Sie die Stile auf label in der CSS-Anwendung.

Hoffe, das hilft.

Answer 3

Im Block Ihrer HTML hinzu:

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

Die Art obigen Einstellungen werden auch die   Abstand ersetzen:

<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> 

Answer 4

Sie wollen die label und textarea Elemente in einer sich selbst stylen enthalten, kugelsichere Art und Weise.

Ich schlage vor, das folgende 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> 

mit folgendem 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; 
} 

ein Elternteil definieren Container div.wrap die beiden untergeordneten Elemente zu halten und geben overflow: auto einen neuen Block-Formatierungskontext zu erzeugen .

Sie möchten dies tun, um sicherzustellen, dass das Floated-Label-Feld nicht mit anderen benachbarten Elementen interferiert, die sich in der Seite oder Form befinden. Dies kann wichtig sein, wenn Sie ein responsives Design erstellen. Das Feld <label> wird nach links verschoben und Sie müssen eine geeignete Breite angeben. Sie können auch Ränder, Hintergrundfarbe oder Bilder, Polsterung nach Bedarf anwenden, um das Design zu erstellen, das Sie benötigen.

Fiddle: http://jsfiddle.net/audetwebdesign/2sTez/

Answer 5

style="max-width: 140px; word-wrap: break-word" 

Ort dies in Ihrem Label-Tag und stellen Sie die max-width oder min-Breite auf Ihre Bedürfnisse. Heads-up funktioniert nicht in IE

Answer 6

white-space: normal;

Weitere Informationen Versuchen Sie besuchen http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 7

Versuchen TEXTWRAP = "true" -Attribut in der Label-Tag-

zum Beispiel mit:

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