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: