text-truncate-scroll
TypeScript icon, indicating that this package has built-in type declarations

1.3.5 • Public • Published

Text Truncate Scroll

npm License Created by James Li

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/

Animation

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>
  1. 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.

Package Sidebar

Install

npm i text-truncate-scroll

Weekly Downloads

21

Version

1.3.5

License

MIT

Unpacked Size

13 kB

Total Files

6

Last publish

Collaborators

  • jayli3n