Hi JC,
This is a question where a example would help. It all depends on:
1. the element in question (the TD element operates differently to DIV
element in many cases)
2. whether sizing has been applied to the element
3. whether positioning had been applied to the element
4. which browser you are referring to (unless it is all browsers)
Here is a long-winded answer...
A DIV is a block level element by nature and will stretch to fit the
viewport (browser window) or any containing box. As soon as you apply
"float", "position: absolute" or "position: fixed" the element MAY
change in dimension (depending on whether you also add a width/height
to the element). If no width is applied to a float, absolute or fixed
width element they naturally tend to "shrink-wrap" or collapse in width.
The DIV, or any block level element for that matter, is also set to
"overflow:visible" as the initial value. This means that an extremely
long word, if wider than the width of the DIV, will poke out the right
side of the DIV (assuming you have the default language - left to
right - "ltr").
You can control this behavior using the "overflow" property. The
possible values in CSS2.1 are: visible | hidden | scroll | auto |
inherit. For example:
div { overflow: visible; } /* will show any content regardless of
whether it's wider or deeper than the element */
div { overflow: hidden; } /* will hide (cut off) any content that is
wider or deeper than the element */
div { overflow: scroll; } /* will add horizontal and vertical scroll
bars to the right and bottom of the element */
div { overflow: auto; } /* will add a scroll bar to the affected axis
of the element */
A TD element is quite different.
Unlike a block level element they naturally collapse in height and
width. You can change this - giving them a set width or stretching
them. They have one other unique characteristic. If you set a width on
a TD and the content is wider than the applied width, the content will
not flow outside the TD element (it will not "overflow"). Instead, the
TD will expand to suit the needs of the content. You cannot apply
"overflow" to a TD.
So are there any solutions? Well, CSS3 offers two properties that may
be of use... "word-wrap" and "word-break". Keep in mind that milage
may vary. Safari and Internet Explorer support both of these
properties. Firefox seems to support "word-wrap" but not "word-break".
Opera does not seem to support either.
Here super-quick is a test case for you:
http://www.maxdesign.com.au/jobs/html-tests/property-wordwrap.htm
HTH
Russ
On 21/07/2010, at 2:58 AM, Jayachandran Kandasamy wrote:
Hi Team,
Is there any idea to overcome the problem when there is content
without blankspace (spaces between words) inside TD / DIV is still
expanding though it has fixed width.
Any suggestions welcome :)
Cheers,
JC
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
