Convert Text Block Into Horizontal Scroller – Text Truncate Scroll

Category: Javascript , Recommended , Text | March 9, 2023
Views Total:159 views
Official Page:Go to website
Last Update:March 9, 2023


Convert Text Block Into Horizontal Scroller – Text Truncate Scroll


We often need to deal with overflowing text in containers, such as titles, descriptions, and captions. Truncating text with ellipsis is a common approach to solve this problem, but it can limit the user’s ability to read the full text. A better approach is to show the full-text content on hover with a scroll effect, which allows the user to see the full content without sacrificing the design.

The Text Truncate Scroll library trims your long text into a single-line paragraph and shows the full content on hover with a scroll effect. Written in TypeScript and works on any devices.

How to use it:

1. Install and import the Text Truncate Scroll.

# Yarn
$ yarn add text-truncate-scroll
$ npm i text-truncate-scroll
// ES Module
import { activateTextTruncateScroll } from "text-truncate-scroll"
// Browser
<script src=""></script>

2. Wrap your content into an element with the CSS class of ‘text-truncate-scroll’.

<p class="text-truncate-scroll">
  Your Content Here

3. Initialize the Text Truncate Scroll.


4. Available options.

  className: 'text-truncate-scroll',
  scrollSpeed: 60,
  timeoutBeforeInit: 800,

You Might Be Interested In:

Leave a Reply