Truncation is a process of shortening the content of text. It is usually represented by an ellipsis, which is three or more truncated characters in a text string. Truncation is typically used for static text or links that exceed the size of their container. It should not be used in page headers, titles, labels, error messages, validation messages, or notifications.
The width of the container (or the text element itself) must also be set to calculate where the truncation will begin. Truncation and “Show More” buttons are two ways to indicate that overflowed content continues elsewhere or below the page. The goal is for a long piece of text truncated by CSS ellipsis to appear in a tooltip only when you hover over the ellipsis (not the entire phrase).In conclusion, truncation is an effective way to shorten text content and make it fit within its designated area. It should be used with caution and only when necessary. To ensure that your truncated text is displayed correctly, use the appropriate classes and titles, as well as set the width of the container or text element.