Zawijanie tekstu etykiety Tekst w obszarze tekstowym

Question

Chcę zmienić rozmiar etykiety obszaru tekstowego w formacie widocznym na obrazie. Próbuję zrobić wosk za pomocą znacznika akapitu, ale to się nie dzieje ..

mój kod ....

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

Pożądany wyjścia ..

Answer 1

coś takiego:

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

Demo

Answer 2

Oto 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;} 

Jeśli nie chcesz, aby utworzyć klasę, można stosować style na label w CSS.

Mam nadzieję, że to pomoże.

Answer 3

W bloku kodu HTML dodać:

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

Ustawienia stylu powyżej zastąpi również odstępy  :

<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

chcesz styl z label i textarea elementy w samo- zawarte w sposób kuloodporny.

Proponuję następujący kod 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> 

z następującym 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; 
} 

zdefiniowanie kontenera nadrzędnego div.wrap posiadać dwa elementy podrzędne i określić overflow: auto wygenerować nowy kontekst formatowania blokowego .

Chcesz to zrobić, aby upewnić się, że pływające pole etykiety nie koliduje z żadnymi innymi sąsiadującymi elementami, które mogą znajdować się na stronie lub formularzu. Może to być ważne, jeśli tworzysz responsywny projekt.

Pole <label> jest unoszone w lewo i należy podać odpowiednią szerokość. Możesz również zastosować marginesy, kolor tła lub obrazy, dopełniając, aby utworzyć odpowiedni projekt.

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

Answer 5

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

to miejsce w tagu etykiety i ustawić max-width lub min-width do swoich potrzeb. heads-up nie działa w IE

Answer 6

Spróbuj white-space: normal;

Więcej szczegółów wizyty http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 7

Spróbuj użyć odpychania tekstu = "true" atrybutu w tagu Label

na przykład:

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