web-dev-qa-db-fra.com

Retour à la ligne du texte d'étiquette dans la zone de texte

Je veux redimensionner l’étiquette d’une zone de texte dans le format indiqué dans l’image. J’essaie de créer une balise de paragraphe, mais cela ne se produit pas ..

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>

Sortie désirée..

photo png image

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

placez-le dans votre étiquette et ajustez la largeur maximale ou minimale à vos besoins . heads up ne fonctionne pas dans IE

12
GertV

Voici la Solution .

Le 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 de classe, vous pouvez appliquer les styles sur label dans le CSS.

J'espère que cela t'aides.

6
Nitesh

Essayez white-space: normal;

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

4
Bandula Dharmadasa

Quelque chose comme ça:

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

Démo

2
Xareyo

Essayez d'utiliser l'attribut textWrap = "true" dans la balise Label. 

par exemple:

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

Vous souhaitez attribuer un style aux éléments label et textarea de manière autonome et à 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 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éfinissez un conteneur parent div.wrap pour contenir les deux éléments enfants et spécifiez overflow: auto pour générer un nouveau contexte de formatage de bloc.

Vous souhaitez effectuer cette opération pour vous assurer que le champ d'étiquette flottant n'interfère pas avec d'autres éléments adjacents pouvant figurer dans la page ou dans le formulaire. Cela peut être important si vous construisez un design réactif.

Le champ <label> est flottant à gauche et vous devez spécifier une largeur appropriée. Vous pouvez également appliquer des marges, une couleur d'arrière-plan ou des images, ainsi que le remplissage nécessaire pour créer le motif dont vous avez besoin.

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

0
Marc Audet

Dans le bloc de votre code HTML, ajoutez:

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

Les paramètres de style ci-dessus remplaceront également 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
suspectus