I am seeking guidance on how to display truncated text in an Angular app on mobile devices...
td {
word-break: break-all;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
td:hover{
overflow: visible;
white-space: normal;
height:auto;
}
https://i.sstatic.net/HcHnv.png
While the above code works well for displaying truncated text on a PC, I am encountering difficulties on mobile devices where hover effects are not applicable. This is a new challenge for me and I am wondering if it is possible to achieve a similar effect on mobile devices within an Angular app.
https://i.sstatic.net/pMnrf.png
When dealing with this issue on mobile, I have noticed that there seems to be no straightforward solution. Despite hovering over the textfields, no interaction occurs (as evident from the screenshot).
Thank you all for your input.
EDITED:
<tr>
<td>
{{vName.get(name.property)}}
</td>
<td id="grid" "" *ngFor="let varT of part[0] && somecode; let i = index">
{{interpolation}}
</td>
</tr>
In the above code snippet, I am trying to implement CSS to truncate text in the td element. However, it seems like achieving the desired effect solely through CSS may not be feasible. One potential workaround could involve utilizing longpress events as suggested in the initial response provided.
In summary, I aim to have my text truncated in the td element with hover functionality similar to PCs even on mobile devices. While I do have an alternative solution in mind, I am keen to explore ways to enable hover effects on mobile devices.