Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use text-overflow in a table cell?
The text-overflow property in CSS is used to handle the overflown text on the web page. This property helps us to show the overflown text in a specific way. The text-overflow property is used with two more other properties with fixed value to show overflowed text in a specific manner and those properties are white-space: nowrap; and overflow: hidden; with the given values. Once these properties are set on the element, we can use the text-overflow property with different values as written below −
clip − It is the default value of this property in which the overflowed text is clipped and not visible or accessible.
ellipsis − This property sets the 3 ellipsis dots (…) after the clipped text to show that the text is hidden.
string − This property will render the given string to represent the clipped text.
initial − It will set the value of the property to its default value.
inherit − This property will inherit the value from its parent element.
Syntax
The below syntax will show how to use the text-overflow property with other properties to show text in specific way −
elementSelector {
white-space: nowrap;
overflow: hidden;
text-overflow: clip | ellipsis | string | initial | inherit;
}
Let us now see the use of the text-overflow property inside the table cells and try to show the overflown text of the table cell in a particular way.
Steps
Step 1 − In the first step, we have to define a <table> element on the cells of which we will use the text-overflow property to show text in specific manner.
Step 2 − In the next step, we will assign the classes to each column of the table to see the use of the text-overflow property with different values. i.e. ellipsis, clip, and the string.
Step 3 − In the last step, we will use the classes assigned in the previous step to apply the text-overflow CSS with other properties.
Example
The below example will explain how to use the text-overflow property in a table cell to hide and show the in a special way −
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border: 1px solid green;
}
table {
width: 100%;
}
.text-ellipsis{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-clipped{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.text-string{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: string;
}
</style>
</head>
<body>
<h2>Use text-overflow in a table cell</h2>
<p><b>The text in below table cells is shown in different ways using the text-overflow property. </b> </p>
<br/>
<table>
<thead>
<tr>
<th> Ellipsis Text</th>
<th> Clipped Text </th>
<th> String Text </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "text-ellipsis">
Tutorials Point 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 from the comforts of their drawing rooms.
</td>
<td class = "text-clipped">
Tutorials Point 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 from the comforts of their drawing rooms.
</td>
<td class = "text-string">
Tutorials Point 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 from the comforts of their drawing rooms.
</td>
</tr>
</tbody>
</table>
</body>
</html>
In this example, we have shown the overflowed text in each column of the table using different CSS property value of the text-overflow property. We are using the ellipsis, clip and string value to show text in specific manner.
Let us now see one more code example, in which we will show the full text of the table column once user hover on the particular column.
Algorithm
The algorithm of this example is similar to the previous example. You just need to add the hover CSS that will show the text of the column on hover to it in the style tag.
Example
The below example will illustrate the changes in the above algorithm to show the column text on hover to it −
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border: 1px solid green;
}
table {
width: 100%;
}
.text-ellipsis{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-ellipsis:hover{
overflow: visible;
white-space: normal;
}
.text-clipped{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.text-clipped:hover{
overflow: visible;
white-space: normal;
}
.text-string{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: string;
}
.text-string:hover{
overflow: visible;
white-space: normal;
}
</style>
</head>
<body>
<h2>Use text-overflow in a table cell</h2>
<p><b>The text in below table cells is shown in different ways using the text-overflow property. </b> </p>
<br/>
<table>
<thead>
<tr>
<th> Ellipsis Text</th>
<th> Clipped Text </th>
<th> String Text </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "text-ellipsis">
Tutorials Point 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 from the comforts of their drawing rooms.
</td>
<td class = "text-clipped">
Tutorials Point 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 from the comforts of their drawing rooms.
</td>
<td class = "text-string">
Tutorials Point 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 from the comforts of their drawing rooms.
</td>
</tr>
</tbody>
</table>
</body>
</html>
In the above example, we have use the same logic to show the overflowen text in different ways as we used in previous example. But, In this exmple, we added one more logic to show the content of the column on hover to it using hover pseudo selector in CSS.
Conclusion
In this article, we have learned about the use of the text-overflow property in table cells to show text in different ways. We have discussed it by implementing it practicaliy with the help of code example. We have also seen an example, in which the full text of each column will be visible on hover to it.
179 Views
