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.
6 Comments
-
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 -
Well thanks for clarifying. I sort of assumed they would both NOT scroll if no scroll was needed. -
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 -
You'll need "scroll" instead of "auto" in some cases (to make it work with Safari).
Manu
http://www.jazar.co.uk -
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. -
css lessons - css scrollbar examples code
-- http://css-lessons.ucoz.com/scroll-css-examples.ht... --
Sites to Watch
Aggregators
RSS
