Fixed table cell size and display length of content with respect to width

Question

I want to make a table using HTML and CSS. But the problem is that the content of the table cell is changing the width and height of it. I want to display the starting content only which is fit in the cell.

What I get:

|           |           | This is some random sentence |
| Column 1  |  Column 2 | I have typed here just to    | 
|           |           | demonstrate you.             | 
                 

What I want:

| Column 1  |  Column 2 | This is some random sente... |

Is it possible to do this with inbuilt html/CSS feature? If not, what can be another way to do this?

Answer 1

-webkit-line-clamp

 .long-text{ width:160px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; overflow: hidden; } td{ border:1px solid; padding:3px; }

 <table> <tr> <td>Column 1</td> <td>Column 2</td> <td class="long-text">This is some random sentence I have typed here just to demonstrate to you.</td> <tr> </table>