Text Truncate Scroll ✨

A light-weight js utility that truncates overflowing text in a container with ellipsis, and shows the text content on hover with a scroll effect.

• Works with any front-end framework (React, VueJS, Angular, Svelte etc.)
• Works in typescript
• Works on mobile / touch
• Simple and light-weight (~5 kb)
• Install with NPM or CDN

P.S. It's fine to call activateTextTruncateScroll() multiple times because it will not re-apply text truncate to elements that has already been applied.

🔗 DEMO: https://jayli3n.github.io/text-truncate-scroll/

Installation

NPM

npm i text-truncate-scroll

CDN

<script src="https://unpkg.com/text-truncate-scroll/lib/index.js"></script>

Usage

1. Render a DOM element with text content

<p class="text-truncate-scroll">
	Imagine you don't know how long this text label will be, that's a responsiveness headache 😭
</p>

2. Once the DOM element is rendered, you simply call the setup function

import { activateTextTruncateScroll } from "text-truncate-scroll"

// In the onmount life-cycle hook of your UI framework...
activateTextTruncateScroll()

API

activateTextTruncateScroll(options: {...})

Parameters

options optional

Property	Type	Default	Description
className	string	text-truncate-scroll	The class name to search for and to apply the text truncate logic.
scrollSpeed	number	60	This is the speed of the text scroll. Play around with different values for what you're after.
timeoutBeforeInit	number	90	The amount of time to wait before running the setup logic. This is recommended because sometimes DOM elements may take time to completely mount, so it's good idea to give a small wait.

Some examples with UI frameworks

React

import { activateTextTruncateScroll } from "text-truncate-scroll"

const App = () => {
	useEffect(() => {
		activateTextTruncateScroll()
	}, [])

	return {
		<div>
			<p class="text-truncate-scroll">Some really long text</p>
		</div>
	}
}

VueJS

<script setup lang="ts">
import { onMounted } from "vue"
import { activateTextTruncateScroll } from "text-truncate-scroll"

onMounted(() => {
	activateTextTruncateScroll()
})
</script>

<template>
	<div>
		<p class="text-truncate-scroll">Some really long text</p>
	</div>
</template>

Angular

import { Component } from '@angular/core';
import { activateTextTruncateScroll } from "text-truncate-scroll"

@Component({
  selector: 'app',
  template: `
	<div>
		<p class="text-truncate-scroll">Some really long text</p>
	</div>
   `
})

export class App {
   constructor() {
      activateTextTruncateScroll()
   }
}

Svelte

<script>
import { onMount } from 'svelte';
import { activateTextTruncateScroll } from "text-truncate-scroll"

onMount(() => {
	activateTextTruncateScroll()
})
</script>

<div>
   <p class="text-truncate-scroll">Some really long text</p>
</div>

Contribution

Pull requests are welcomed! 😄
If you have any problems or questions, open an issue.