text-truncation

text-truncation truncates the copy of multiple elements in a container with a fixed height.

If you, for example, have a teaser element with a headline and some copy, both having a variable length, you usually want to show as much text as possible to avoid whitespace at the bottom of the teaser. text-truncation allows you to do so by always only truncating as few characters as possible. It also works with HTML elements in your truncated copy. That means you can style your copy with, for example, <b> or <i> or use links.

NOTE: text-truncation truncates all children (or elements with a given class name) from last to first. That means that in the given example, first the copy gets truncated and afterwards the headline (if truncating the copy is not enough).

Demo

https://mgrsskls.github.io/text-truncation/

What about CSS?

CSS is only able to truncate text for a single line or recently also for multiple lines, but only for one container element. The given use case is not possible with CSS.

Installation

npm install text-truncation

Options:

• appendix (default …): The string that is appended at the end of the truncated copy.
• className (default null): The class name that is used to select your elements that should be truncated. If you omit it, text-truncation will use the direct children of the element, which you passed as the first argument.
• cutOffLength (default 4): Defines how many characters will be removed at the end to properly append the appendix.

Usage

HTML

<div class="Teaser">
  <div class="TextTruncation">
    <h2 class="TextTruncation-text">[…]</h2>
    <p class="TextTruncation-text">[…]</p>
  </div>
</div>

NOTE: .Teaser needs a fixed height.

CSS

.TextTruncation {
  height: 100%;
  overflow: hidden;
}

NOTE: The .TextTruncation wrapper is only necessary if your containing element (here: .Teaser) has padding. If it does not, you can also add text-overflow: hidden directly to your containing element.

JS

import TextTruncation from "text-truncation";

new TextTruncation(document.querySelector(".TextTruncation"), {
  className: "TextTruncation-text"
});

Troubleshooting

• Make sure that you initialize TextTruncation after your elements have been rendered completely. Otherwise text-truncation might use wrong dimensions and therefore not work.