How to use text-overflow in a table cell ?
In this article, we will see how to use text-overflow in a table cell. A text-overflow property in CSS is used to specify that some text has overflown and hidden from view.
Approach: The white-space property must be set to “nowrap” and the overflow property must be set to “hidden”. The overflowing content can be clipped, display an ellipsis (‘…’), or display a custom string.
Syntax:
text-overflow: clip|string|ellipsis|initial|inherit;
Example: In the following example,we will consider ellipsis to use the test-overflow property in a table cell.
HTML
<!DOCTYPE html><html><head> <style> table,th,td { border: 1px solid black; } table { width: 100%; } .first { width: 50%; } .ellipsis { position: relative; } .ellipsis:before { content: ' '; visibility: hidden; } .ellipsis span { position: absolute; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>text-overflow in table cell</p> </b> <br/> <table border="1"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td class="ellipsis first"> <span> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </span> </td> <td class="ellipsis"> <span> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </span></td> <td class="ellipsis"> <span> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </span> </td> </tr> </tbody> </table></body></html> |
Output:
.png)
