In my table, I have implemented styles that display only the first line of text. However, I would like to show at least two lines if available. For example, if the text has four lines, I want to display the first two lines from the start and reveal the remaining lines when the user hovers over the text.
Below is the current CSS code I am using:
.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;
}
How can I modify the code to achieve the desired effect?
Thank you!
EDIT 1
Here is a snippet of my 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>