Skip to content
Truncates the text of multiple elements based on the height of their container
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
.eslintrc
.gitignore
LICENSE
README.md
gulpfile.js
index.js
package-lock.json
package.json

README.md

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.

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.
You can’t perform that action at this time.