When truncating a text, always do this.
Adding a title attribute for assistive technology.
A common approach to handling a long text that overflows the parent container in the HTML is text truncation. Text truncation is an approach where an overflowing text is hidden and replaced with an ellipsis (…). This can be achieved with 3 simple CSS properties:
However, there are many examples where the developer adds the class to the wrapper and calls it done.
The one extra step needed it to add
title attribute to the same element that the
truncate class is added to.
<p class="truncate" title="This text will be truncated.">
This is text will be truncated.
Noticed now that hovering your cursor over the truncated text will show you the full text!