Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Make the CSS overflow: hidden Work on a Element?
The CSS overflow: hidden property is used to hide content that extends beyond the boundaries of an element. However, for it to work effectively, especially on table cells, you need to combine it with other CSS properties to control how the content is displayed.
Syntax
selector {
overflow: hidden;
}
Approaches to Make the CSS overflow: hidden Work
Method 1: Using table-layout: fixed Property
By default, tables adjust column widths dynamically. Using table-layout: fixed on the table element ensures that column widths stay fixed and don't expand to fit their content, making overflow: hidden effective
<!DOCTYPE html>
<html>
<head>
<style>
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
td {
width: 200px;
overflow: hidden;
border: 1px solid #333;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
CSS overflow: hidden property is used to hide
the lengthy content based on the size of your element.
This text is very long and should be hidden.
</td>
<td>
Another cell with lengthy content that should be
hidden when it exceeds the fixed width of 200px.
</td>
</tr>
</table>
</body>
</html>
A table with two cells, each 200px wide. The lengthy text in both cells is cut off at the cell boundaries without any visual indication of truncation.
Method 2: Using text-overflow and white-space Properties
To create a more user-friendly experience, combine overflow: hidden with text-overflow: ellipsis and white-space: nowrap to show ellipsis (...) where text is truncated
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 70%;
table-layout: fixed;
border-collapse: collapse;
}
td {
padding: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #333;
width: 250px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
CSS overflow: hidden property is used to hide
the lengthy content based on the size of your element.
</td>
<td>
This is another example of long text that will be
truncated with ellipsis when it exceeds the cell width.
</td>
</tr>
</table>
</body>
</html>
A table with two cells showing truncated text followed by ellipsis (...) to indicate that more content exists beyond the visible area.
Key Properties Explained
| Property | Function |
|---|---|
overflow: hidden |
Hides content that overflows the element boundaries |
table-layout: fixed |
Prevents table columns from expanding automatically |
text-overflow: ellipsis |
Adds "..." to indicate truncated text |
white-space: nowrap |
Prevents text from wrapping to multiple lines |
Conclusion
The overflow: hidden property works effectively on table elements when combined with table-layout: fixed. Adding text-overflow: ellipsis provides a better user experience by indicating truncated content.
639 Views
