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.
To display truncated text effectively, there are several ways to shorten the content to fit within a given designated area. DSC Engineering recently opened a JavaScript plugin called Shave to solve this problem. The CSS rule line clamp, which truncates text to a certain number of lines, is implemented in Safari and Chrome. Shave is a zero-dependency JavaScript microplugin that truncates multi-line text to fit inside an HTML element based on a set maximum height. To use first and end line truncation, enter the appropriate class and add a title to populate the browser tooltip that appears when you hover over the truncated text.
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.
