Word-wrap du texte de l'étiquette dans la zone de texte

Je veux re-taille de l'étiquette d'un texte de la zone dans le format indiqué dans l'image.J'essaie de faire worp à l'aide de balise de paragraphe, mais il n'est pas le cas..

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

De Sortie Désiré..

source d'informationauteur Lucy

12
```
style="max-width: 140px; word-wrap: break-word"
```
de le placer dans votre balise d'étiquette et d'ajuster le max-width et min-width à vos besoins.
heads up ne fonctionne pas dans IE

Ici est la Solution.

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

Le CSS:

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

Si vous ne voulez pas créer une classe, vous pouvez appliquer des styles sur label dans le CSS.

Espère que cette aide.

4

Essayer white-space: normal;

Pour plus de détails, visitez
http://www.w3schools.com/cssref/pr_text_white-space.asp

Quelque chose comme ceci:

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

Démo

Dans le bloc de code HTML, ajouter:

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

Les paramètres de style ci-dessus sera également remplacer le l'espacement:

<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

Vous voulez le style de la label et textarea éléments en une unité autonome, à l'épreuve des balles.

Je suggère le code HTML suivant:
```
<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>
```
avec le code CSS suivant:
```
.wrap {
    outline: 1px dotted blue; /* Just for demonstration... */
    overflow: auto;
}

.wrap label {
    outline: 1px dashed blue;
    float:left;
    width: 10em;
    margin-right: 1.00em;
}
```
Définir un conteneur parent div.wrap pour tenir les deux éléments enfants et spécifier overflow: auto pour générer un nouveau bloc de mise en forme de contexte.

Vous voulez le faire pour vous assurer que le flottait champ d'étiquette n'interfère pas avec les autres éléments adjacents qui peuvent être dans la page ou la forme. Cela peut être important si vous êtes à la construction d'un responsive design.

La <label> champ est flottant à gauche et vous devez spécifier une largeur adéquate. Vous pouvez également appliquer des marges, la couleur de fond ou des images, rembourrage en tant que de besoin pour créer le design que vous avez besoin.

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

Essayez d'utiliser d'habillage de texte="true" attribut dans la balise d'Étiquette

par exemple:

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

Vous devez vous connecter pour publier un commentaire.