Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Truncates the text of multiple elements based on the height of their container

Topics

Resources

License

Packages

No packages published