fix table header to two lines with three dots

Question

There is a table with thead and i need to fix to two lines the elements in inside it to, I mean if this header text is longer than two lines, remaining part of text must be shown with three dots. Hovewer instead of two line break, i can only make white-space:nowrap with one line and

How can i achieve that?

UPDATE: When i add .table thead th { display: -webkit-box!important;
-webkit-line-clamp: 2!important;
-webkit-box-orient: vertical!important;
overflow: hidden!important; } , it shows the column of table as vertical like that:

Answer 1

without seeing your code i suggest:

.content{   
   display: -webkit-box;   
   -webkit-line-clamp: 2;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

more info here: https://medium.com/@elad/trimming-multi-lines-in-css-5ae59d5e6d84

Answer 2

Use this css properties

.class {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}