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 use text-overflow in a table cell?
The text-overflow property in CSS controls how overflowing text is displayed when it exceeds its container's boundaries. This property is particularly useful in table cells where space is limited and you need to present text in a clean, organized manner.
The text-overflow property must be used alongside two essential properties: white-space: nowrap and overflow: hidden. Without these companion properties, text-overflow has no effect.
Syntax
Following is the syntax for using the text-overflow property in table cells
td {
max-width: value;
white-space: nowrap;
overflow: hidden;
text-overflow: clip | ellipsis | string | initial | inherit;
}
Text-overflow Values
The text-overflow property accepts the following values
clip The default value that clips the overflowing text without any indication that text is hidden.
ellipsis Displays three dots (?) at the end of the visible text to indicate that content is truncated.
string Displays a custom string to represent the clipped text (limited browser support).
initial Sets the property to its default value (clip).
inherit Inherits the value from the parent element.
Basic Implementation in Table Cells
Following example demonstrates how to apply text-overflow to table cells with different values
<!DOCTYPE html>
<html>
<head>
<title>Text-overflow in Table Cells</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
.text-ellipsis {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-clipped {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<h2>Text-overflow in Table Cells</h2>
<table>
<thead>
<tr>
<th>Ellipsis Text</th>
<th>Clipped Text</th>
<th>Normal Text</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-ellipsis">
This is a very long text that will be truncated with ellipsis when it exceeds the maximum width of the table cell.
</td>
<td class="text-clipped">
This is a very long text that will be clipped without any indication when it exceeds the maximum width of the table cell.
</td>
<td>
This is normal text that wraps to multiple lines when it exceeds the cell width.
</td>
</tr>
</tbody>
</table>
</body>
</html>
The output shows three different behaviors
Ellipsis Text: "This is a very long text that will be..."
Clipped Text: "This is a very long text that will be"
Normal Text: "This is normal text that wraps to
multiple lines when it exceeds the
cell width."
Interactive Hover Effect
You can enhance user experience by showing the full text when users hover over truncated cells
<!DOCTYPE html>
<html>
<head>
<title>Text-overflow with Hover Effect</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
.expandable-cell {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: all 0.3s ease;
}
.expandable-cell:hover {
overflow: visible;
white-space: normal;
background-color: #f9f9f9;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<h2>Hover to Reveal Full Text</h2>
<p>Move your mouse over the truncated cells to see the full content.</p>
<table>
<thead>
<tr>
<th>Company</th>
<th>Description</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>TutorialsPoint</td>
<td class="expandable-cell">
TutorialsPoint originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace.
</td>
<td class="expandable-cell">Hyderabad, India</td>
</tr>
<tr>
<td>Tech Corp</td>
<td class="expandable-cell">
A leading technology company specializing in innovative software solutions for enterprise clients worldwide.
</td>
<td class="expandable-cell">San Francisco, CA</td>
</tr>
</tbody>
</table>
</body>
</html>
This example demonstrates how hovering over truncated cells reveals the complete text with a smooth transition effect.
Responsive Table with Text-overflow
Following example shows how to create a responsive table that adapts text-overflow behavior based on screen size
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text-overflow Table</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.responsive-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.responsive-table th,
.responsive-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.responsive-table th {
background-color: #4CAF50;
color: white;
}
.truncate-text {
max-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-name { width: 25%; }
.col-email { width: 30%; }
.col-address { width: 45%; }
@media (max-width: 768px) {
.truncate-text { max-width: 100px; }
}
</style>
</head>
<body>
<h2>Responsive Table with Text-overflow</h2>
<table class="responsive-table">
<thead>
<tr>
<th class="col-name">Name</th>
<th class="col-email">Email</th>
<th class="col-address">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="truncate-text">John Michael Anderson</td>
<td class="truncate-text">john.anderson@company.com</td>
<td class="truncate-text">123 Main Street, Downtown City, State 12345</td>
</tr>
<tr>
<td class="truncate-text">Sarah Elizabeth Johnson</td>
<td class="truncate-text">sarah.johnson@business.org</td>
<td class="truncate-text">456 Oak Avenue, Suburban Town, State 67890</td>
</tr>
</tbody>
</table>
</body>
</html>
This responsive table automatically adjusts text truncation based on available space, ensuring optimal readability across different devices.
Key Implementation Points
When implementing text-overflow in table cells, consider the following points
Set max-width Always define a maximum width for the cell to establish the overflow boundary.
Use table-layout: fixed Apply this to the table element for consistent column widths and better control over text-overflow behavior.
Consider accessibility Provide alternative ways to access truncated content, such as hover effects or expandable rows.
Test responsiveness Ensure text-overflow works well across different screen sizes and devices.
Browser Compatibility
The text-overflow property has excellent browser support. The ellipsis value is supported in all modern browsers, while the string value has limited support and is mainly available in Firefox.
| Value | Chrome | Firefox | Safari | Edge |
|---|
3K+ Views
