How to use text-overflow in a table cell ?

Last Updated : 06 Jun, 2022

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> 