Convert Text Block Into Horizontal Scroller – Text Truncate Scroll

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

Preview:

Convert Text Block Into Horizontal Scroller – Text Truncate Scroll

Description:

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
$ npm i text-truncate-scroll
// ES Module
import { activateTextTruncateScroll } from "text-truncate-scroll"
// Browser
<script src="https://unpkg.com/text-truncate-scroll/lib/index.js"></script>

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

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

3. Initialize the Text Truncate Scroll.

activateTextTruncateScroll()

4. Available options.

activateTextTruncateScroll({
  className: 'text-truncate-scroll',
  scrollSpeed: 60,
  timeoutBeforeInit: 800,
})

You Might Be Interested In:


Leave a Reply