CODEWITHSUNDEEP
htmlcssforms
Lucy
Lucy

Reputation: 1852

Word-wrap of Label text in text-area

I want to re-size the label of a text-area in the format shown in the picture below. I'm trying to do a wrap using a paragraph tag, but it is not working.

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:

image of a box with a text label to the left, where each line of the label is wrapped to a new line after one or two words, so that the label is the same height as the box

Upvotes: 17

Views: 90414

Answers (6)

GertV
GertV

Reputation: 851

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

place these styles in your label tag and adjust the max-width or min-width to your needs.

This doesn't work in Internet Explorer

Upvotes: 16

Nitesh
Nitesh

Reputation: 15779

Here is a JSFiddle 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 don't want to create a class, you can apply the styles on label in the CSS.

Upvotes: 7

Bandula Dharmadasa
Bandula Dharmadasa

Reputation: 877

Try white-space: normal;

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

Upvotes: 20

Marc Audet
Marc Audet

Reputation: 46825

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/

Upvotes: 0

suspectus
suspectus

Reputation: 17288

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>

Upvotes: 1

Xareyo
Xareyo

Reputation: 1377

Something like this:

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

Demo

Upvotes: 4

Related Questions