Hi Russ, I tried these CSS 3 properties and tested in the IE7 and Mozilla FF 3.6.6 browser, they are not helping is there any special hacks available to overcome this problem
Thanks for your immediate response and article link you have given me. Cheers, JC On Wed, Jul 21, 2010 at 5:15 AM, Russ Weakley <[email protected]> wrote: > 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: [email protected] >> ******************************************************************* >> > > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [email protected] > ******************************************************************* > > ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [email protected] *******************************************************************
