When truncating a text, always do this.

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:

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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.
</p>

Noticed now that hovering your cursor over the truncated text will show you the full text!