Text overflow on mozilla

[ak7861]

Hi,

For many months now, I have been wondering how to solve this problem.

I have a table which is lets say 200 pixels. If i insert text which has no spaces, it overflows the table.

For eg. lets say you put in a long url. URLS dont have spaces right? Well, see what happends.

Is there anyway to prevent this from happening? I tried 'overflow: hidden', but this just causes the text to disappear if it has past 200 pixels.

Any input, would be great.

AK7861

[ak7861]

Forgot to mention that this happends on Mozilla only.

[tech_support]

overflow:auto ?

[jscheuer1]

The best method would be to use a descriptive link text in an anchor link tag:

<a href="some_really_long_url">Short Description with spaces</a>

overflow:auto will either have no effect or produce a scroll bar. Use the wbr tag. It is non-standard but, will do the trick in Mozilla or at least in FF 1.5.0.7. In Opera, it has no effect so you will still have your problem in that browser.

As an example, if you have this:

kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

you can do this:

k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>k<wbr>

You don't have to have the <wbr> tag after every letter but, that is the surest way. Depending upon the size of the area, you should be able to get away with much less of these tags, like every 5th letter, but, it may be more than you think. In FF hold down the ctrl key and hit the plus key. This will make the font larger. After doing this a few times, you may decide you need more of these tags than you first thought.

You can get around this by setting all widths in em's.

[Twey]

As John mentioned above, if you use an em width for the container, it will expand to accommodate its content, as you're probably seeing in IE (although this should not happen when the width is not set in ems; the fact that it does is evidence of yet another bug in IE).

[jscheuer1]

As John mentioned above, if you use an em width for the container, it will expand to accommodate its content, as you're probably seeing in IE (although this should not happen when the width is not set in ems; the fact that it does is evidence of yet another bug in IE).

This seems a bit confusing to me and perhaps more so to others. There are at least two mechanisms at work here and I think you may have missed and/or are ignoring one of them.

The main problem prompting the original post (and what I think you've skipped) is that even though IE will expand an element's set width on a content driven basis, using it as a sort of min-width value, other browsers do not. This is particularly noticeable with an image larger than its container and/or, in this case, with text that cannot wrap because it contains no white space. Often times this doesn't really make a difference but, when the container has a border, it looks odd.

Another solution (depending upon the overall layout of the page) is to omit the width property or attribute of the container, whichever is being used. Or to set it as min-width, sometimes even using a large max-width. You are best off just omitting all width properties/attribute from the container if that works though. Setting the container's width in em's will not help here.

A subsidiary problem, that sprang to my mind is how text will overflow a border set in pixels if the font-size is changed by the user. If font-size is set in pixels, this is no problem in IE, the font-size will not change - or in Opera, the container will be expanded along with everything else (including images) on the page - Opera treats font-size changes like a zoom in/out utility. However, in most browsers besides IE and Opera, unless the other items on the page have their dimensions set in em's or ex's, they will remain fixed in size under user font-size changes, which will take effect even over font-sizes rendered in pixels.

[Twey]

Setting the container's width in em's will not help here.

Setting a container's size in ems should cause it to resize in other browsers much the way it does in IE, unless my memory is much mistaken.

[jscheuer1]

Setting a container's size in ems should cause it to resize in other browsers much the way it does in IE, unless my memory is much mistaken.

It's not your memory in this case. Except that IE, in many cases, won't resize anything in response to the user's changing the view/text size. You of course are correct in that setting a container's dimensions appropriately in em's will allow it to resize with user text resizing in FF, although this may have unexpected consequences in IE if the font-size of all parent elements aren't set as a percentage and the content itself in either em's or (preferably) percentage. It can also get sloppy in various different browsers in some cases as, the relation between text-size and em width is not identical in all browsers, especially when borders and/or margin, padding are thrown into the mix.

But, that wasn't at issue here, at least not primarily, nor in the section of my post where I state that it will not help with a different situation. That different situation is this:

The main problem prompting the original post (and what I think you've skipped) is that even though IE will expand an element's set width on a content driven basis, using it as a sort of min-width value, other browsers do not.

To put it more clearly, without even thinking about the user resizing the text, say you have a division:

<div style:border:2px solid black;width:12em;">
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</div>

In IE, even though the content doesn't fit to begin with, the element expands horizontally because the line won't wrap. It is because there is no word break that the text will not wrap and, in a standards compliant browser, because it is longer than 12em, it will overflow the 1px black border. Not so in IE. In IE the division will grow to accommodate the extra non-wrapping text. The OP wanted FF to behave like this as well. There are all sorts of ways of dealing with it, depending upon what exactly an acceptable solution can look like. The best solution would be simply to set the font-size in percent and the width in em's of an appropriate length but, perhaps this is not an option or would end up causing other problems in certain situations as mentioned above. In which case, some of the other solutions would be worth looking into.

[Twey]

I wasn't talking about text resizing either. Specifying dimensions in ems should cause the container to size itself around the content using the specified dimension as a minimum, as it does in IE, if I remember correctly.

[jscheuer1]

Here is another pretty good solution, once again depending the situation -

In the head:

<style type="text/css">
#demo {
min-width:100px;
border:2px solid black;
position:absolute;
width:auto;
}
* html #demo {
width:100px;
position:static;
}
</style>

In the body:

<div id="demo">
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</div>

Depending upon other layout, whatnot, some vertical and/or horizontal space may need to be added in non-IE browsers only. This cannot be done as part of the #demo division due to its absolute positioning (required to limit the width to content length when it exceeds 100px).