标签文本的自动换行在文本区域

Question

I want to re-size the label of a text-area in format shown in the picture.I"m trying to do worp using paragraph tag but it is not happening..

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

Desired Output..

Answer 1

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

place this in your label tag and adjust the max-width or min-width to your needs. heads up doesn't work in IE

Answer 2

Here is the Solution .

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

The CSS:

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

If you dont want to create a class, you can apply the styles on label in the CSS.

Hope this helps.

Answer 3

Try white-space: normal;

For more details visit http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 4

Something like this:

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

Demo

Answer 5

In the block of your HTML add:

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

The style settings above will also replace the spacing:

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

You want to style the label and textarea elements in a self-contained, bullet-proof manner.

I suggest the following 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>

with the following 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;
}

Define a parent container div.wrap to hold the two child elements and specify overflow: auto to generate a new block formatting context.

You want to do this to make sure that the floated label field does not interfere with any other adjacent elements that may be in the page or form. This may be important if you are building a responsive design.

The <label> field is floated left and you must specify a suitable width. You can also apply margins, background color or images, padding as needed to create the design that you need.

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

Answer 7

Try using textWrap="true" attribute in the Label tag

for example:

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