Truncating Text: A Comprehensive Guide

Text truncation is a process of shortening content for web pages or other applications. Learn how to use Shave plugin or other methods like RIGHT, LEFT and MID tools for truncating text.

Truncating Text: A Comprehensive Guide

Text truncation is the process of shortening the content of text. It is usually followed by three points called an ellipsis. On web pages, there are several ways to shorten text content to fit within a given designated area. DSC Engineering recently opened a JavaScript plugin to solve this problem called Shave.

There are many methods in every language to truncate text. However, recently, I faced a challenge on the front-end in CSS, where I needed to truncate text for multiple lines. In this case, I wasn't allowed to use the JS function and had to fix it via CSS. Consider this property as the box text handle.

In simple words, when you place the text in any element, the text wrapping in that specific space depends on the width of the element. If the width of the frame is 40 pixels and you added text in it, the text will adjust itself according to the available white space. By default, the blank space in the box is set to normal. Therefore, every text that reaches the 400-pixel limit will be automatically adjusted and changed to the next line.

On some occasions, there is a string list which includes some long strings and for a neat order, you may want to truncate the strings to a fixed length. Shave is a zero-dependency JavaScript microplugin that truncates multi-line text to fit inside an HTML element based on a set maximum height. The value that worked for me when I wanted to show three periods at the end of my truncated text was an ellipsis. The generalized formula that will be used to truncate text from the left for a fixed number of characters is: LEFT(A1, 6).

Here, A1 is the string you use and 6 indicates truncating the string into six characters. If you have Kutools for Excel, a handy tool, you can apply its Delete By Position utility to quickly remove characters that you don't need and truncate the string. Currently, the CSS rule line clamp which truncates text to a certain number of lines is implemented in Safari and Chrome. We can do this using the powerful and standard RIGHT, LEFT and MID text truncation tools easily.

Charlotte Wilson
Charlotte Wilson

Friendly travel advocate. Freelance zombie scholar. Extreme web practitioner. Evil coffee buff. Professional beer practitioner.

Leave Reply

Required fields are marked *