CODEWITHSUNDEEP
htmlcss
nectar
nectar

Reputation: 9679

how to control the width of legend

<FIELDSET>
<LEGEND> Here my title goes.which is too long and need to be displayed in 2 lines like word-wrap. 
Line 2: Please suggest!</LEGEND>
Name: <INPUT TYPE="text" SIZE="20">
Email: <INPUT TYPE="text" SIZE="20">
</FIELDSET>

I tried max-width, word-wrap to both FieldSet and Legend as but Title is showing in a single line which incleases the box width and looks odd.

**Not browser specific problem

Upvotes: 2

Views: 7478

Answers (4)

user4188924
user4188924

Reputation: 1

Just set this in your css:

fieldset {
    width:200px;
}

here you can set the width size as per your wish

Upvotes: 0

Moob
Moob

Reputation: 16204

For old IE you can put the content in a span. The span will wrap. For everything else white-space:normal should do the trick.

Edit: but you have to use a fixed width :(

legend {
    white-space: normal; 
}
legend span {
    display:block; width:100px;
}

This solution is even better :)

legend {
    white-space: normal; 
    display:table;
}

Upvotes: 0

Pat Dobson
Pat Dobson

Reputation: 3299

Simply set the 'width' CSS attribute to what you want and the text will automatically wrap

legend{ outline: 1px solid red; width: 100px; }

Fiddle here : http://jsfiddle.net/YTJUA/

Upvotes: 1

xec
xec

Reputation: 18034

Try simply setting a width:

legend {
    width: 540px;
}

http://jsfiddle.net/pHtpL/

Upvotes: 0

Related Questions