ColdFusion Muse

CSS and handling text overflow

Mark Kruger July 14, 2005 1:41 PM Design Comments (6)

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.

  • Share:

6 Comments

  • Dan G. Switzer, II's Gravatar
    Posted By
    Dan G. Switzer, II | 7/14/05 1:33 PM
    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
  • mkruger's Gravatar
    Posted By
    mkruger | 7/14/05 2:03 PM
    Well thanks for clarifying. I sort of assumed they would both NOT scroll if no scroll was needed.
  • Bob Vlasak's Gravatar
    Posted By
    Bob Vlasak | 7/14/05 9:56 PM
    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
  • emmanuel's Gravatar
    Posted By
    emmanuel | 9/29/05 12:54 PM
    You'll need "scroll" instead of "auto" in some cases (to make it work with Safari).

    Manu
    http://www.jazar.co.uk
  • Simon Williams's Gravatar
    Posted By
    Simon Williams | 4/20/07 10:08 AM
    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.
  • sweetangel's Gravatar
    Posted By
    sweetangel | 6/7/08 1:33 PM
    css lessons - css scrollbar examples code
    -- http://css-lessons.ucoz.com/scroll-css-examples.ht... --