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>