You Dream it...We Build it...
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:
#divCell
{
width: 148px;
height: 40px;
overflow: auto;
}
</style>
- 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>
<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.
Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.
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
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
Manu
http://www.jazar.co.uk
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.
-- http://css-lessons.ucoz.com/scroll-css-examples.ht... --