ColdFusion Muse

CSS and handling text overflow

Recently I was trying to solve a problem with an long text string that widened a table beyond its required width - causing the page to go out of alignment. Like a lot of you readers I'm a code junky who picks up CSS and style tips as I need them. So when I run into odd issues that I've not seen before I always need a little help. I was given this little tidbit that seems to work in IE, Firefox, Opera and Netscape 7.

It seems there is an "overflow" attribute you can use. For example:

<style type="text/css">
#divCell
{
   width: 148px;
   height: 40px;
   overflow: auto;
}
</style>
Using this attribute you can force a behavior on the offending cell. The possible attribues are:
  • Visible - the content doesn't wrap and the table widens. This is the default behavior.
  • Hidden - the content is truncated and not shown. No visible way to "see" it in this case.
  • scroll - the content is truncated but there is a scroll bar for viewing.
  • auto - IF the content is truncated the browser displays a scroll-bar (how is this different from "scroll"?).

Here's a sample of the "auto" behavior.

<html>

<head>
<title>148</title>
<style type="text/css">
#divCell
{
width: 148px;
height: 40px;
overflow: auto;
}
</style>
</head>

<body>
<table>
<tr>
<td>
<div id="divCell">
1234567890123456789012345678901234567890123456789012345
</div>
</td>
</tr>
</table>
</body>
</html>

And here is the rendered result.

1234567890123456789012345678901234567890123456789012345

Thanks to Bob Vlasek of Omaha NE for sorting that one out for me.

Comments
Dan G. Switzer, II's Gravatar Mark,

The difference between "scroll" and "auto" may vary by browser, but I know that in some versions of IE, "scroll" always shows the scrollbars even if they're not needed and "auto" only shows them if there is actually overflow in the container.

-Dan
# Posted By Dan G. Switzer, II | 7/14/05 1:33 PM
mkruger's Gravatar Well thanks for clarifying. I sort of assumed they would both NOT scroll if no scroll was needed.
# Posted By mkruger | 7/14/05 2:03 PM
Bob Vlasak's Gravatar Mark,

Unlike your example, I did not get a vertical scroll bar when I ran my tests. It may have to do with the different text size we used. Try playing with the height and see if you can make the vertical bar disappear.

Bob
# Posted By Bob Vlasak | 7/14/05 9:56 PM
emmanuel's Gravatar You'll need "scroll" instead of "auto" in some cases (to make it work with Safari).

Manu
http://www.jazar.co.uk
# Posted By emmanuel | 9/29/05 12:54 PM
Simon Williams's Gravatar Hi,

In general (not allowing for different versions of browsers) the overflow settings are as follows:

auto: scroll bar will only show if needed
scroll: scroll bar will always show, only enabled if needed
hidden: anything that doesn't fit in the container (<td> or <div> or ...) will not be shown and there will not be a scroll bar.
# Posted By Simon Williams | 4/20/07 10:08 AM
sweetangel's Gravatar css lessons - css scrollbar examples code
-- http://css-lessons.ucoz.com/scroll-css-examples.ht... --
# Posted By sweetangel | 6/7/08 1:33 PM



Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.