it-swarm.com.de

Zeilenumbruch des Beschriftungstextes im Textbereich

Ich möchte die Beschriftung eines Textbereichs in einem Format anpassen, das im Bild dargestellt ist. Ich versuche, mit Absatz-Tag zu arbeiten, aber es geschieht nicht.

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

photo png image

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

platzieren Sie dies in Ihrem Label-Tag und passen Sie die maximale oder minimale Breite an Ihre Bedürfnisse an. Heads-Up funktioniert im IE nicht

12
GertV

Hier ist die Lösung .

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

Das CSS:

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

Wenn Sie keine Klasse erstellen möchten, können Sie die Stile auf label im CSS anwenden.

Hoffe das hilft.

6
Nitesh

white-space: normal; ausprobieren

Weitere Informationen finden Sie unter http://www.w3schools.com/cssref/pr_text_white-space.asp

4

Etwas wie das:

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

Demo

2
Xareyo

Versuchen Sie es mit dem Attribut textWrap = "true" im Label-Tag 

zum Beispiel:

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

Sie möchten die Elemente label und textarea in sich geschlossen und kugelsicher gestalten.

Ich schlage folgendes HTML vor:

<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 dem folgenden 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;
}

Definieren Sie einen übergeordneten Container div.wrap, der die beiden untergeordneten Elemente enthalten soll, und geben Sie overflow: auto an, um einen neuen Blockformatierungskontext zu generieren.

Sie möchten dies tun, um sicherzustellen, dass das schwebende Beschriftungsfeld keine anderen angrenzenden Elemente stört, die möglicherweise in der Seite oder im Formular enthalten sind. Dies kann wichtig sein, wenn Sie ein responsives Design erstellen.

Das <label>-Feld wird nach links verschoben und Sie müssen eine geeignete Breite angeben. Sie können auch Ränder, Hintergrundfarben oder Bilder anwenden und nach Bedarf auffüllen, um das gewünschte Design zu erstellen.

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

0
Marc Audet

Fügen Sie im Block Ihres HTML-Codes Folgendes hinzu:

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

Die Stileinstellungen oben ersetzen auch den Abstand:

<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