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: '&nbsp;';
            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:

How to use text overflow property in CSS ?

sravankumar_171fa07058

Improve

Article Tags :

How to use text-overflow in a table cell ?

Similar Reads

Thank You!

What kind of Experience do you want to share?