Переполнение текста, начиная с двух строк

Question

У меня есть следующие стили, которые я использую в таблице. Если текст содержит более одной строки, он показывает только первую строку, а остальные отображаются, если пользователь наводит указатель мыши на текст.

Дело в том, что я хочу показать хотя бы две строки, если есть находятся. Представьте, что у меня есть текст из 4 строк, 2 первые строки должны быть показаны с самого начала, а остальные 2 - когда пользователь наводит указатель мыши на текст.

Мой текущий код такой:

.cortar {
  width: 135px !important;
  height: 20px;
  padding: 20px;
  border: 1px solid blue;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cortar:hover {
  width: 100%;
  white-space: initial;
  overflow: visible;
  cursor: pointer;
}

Как мне этого добиться?

Спасибо!

РЕДАКТИРОВАТЬ 1

Мой html:

<p-table [columns]="columnasIndicadoresOperacion>
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
           <col *ngFor="let col of columns">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
       <tr>
          <th *ngFor="let col of columns">
              {{col.header}}
          </th>
       </tr>
     </ng-template>
     <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
           <td class="cortar"*ngFor="let col of columns">
               <p [title]="rowData.indicadores[col.field]">
                   {{rowData.indicadores[col.field]}}
               </p>
           </td>
        </tr>
     </ng-template>
 </p-table>

Answer 1

Попробуйте -webkit-line-clamp, как показано ниже:

.cortar {
  width: 135px !important;
  height: 20px;
  padding: 20px;
  border: 1px solid blue;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   /* from here */
   box-sizing: border-box;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

В случае, если это какой-то файл s css, который скомпилирован, вам может понадобиться добавить autoprefixer. Я столкнулся с этим при работе с angular.

.cortar {
  width: 135px !important;
  height: 20px;
  padding: 20px;
  border: 1px solid blue;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   -webkit-line-clamp: 2;
    /* autoprefixer: off */
    webkit-box-orient: vertical;
    /* autoprefixer: on */
}

здесь демонстрационный код