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>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>
Desired Output..
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
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.
Try white-space: normal;
For more details visit http://www.w3schools.com/cssref/pr_text_white-space.asp
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>
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.