jQuery Plugin For Responsive Scrollable Text - adaptText

File Size: 184 KB
Views Total: 1480
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Responsive Scrollable Text - adaptText

adaptText is a jQuery text plugin for responsive layout that automatically resizes the long text of your page to adapt the container/window's width. The plugin has the ability to add an ellipsis at the end of the overflowed text and make your long text scrollable when mouse hover over.

How to use it:

1. Include the jQuery javascript library and jQuery adaptText plugin at the end of your html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="src/jquery-adapttext.js"></script> 

2. Create your long text with scrollable support using data-scrollable attribute. You can pass more options to the long text by using the data-OPTIONS attributes, or by passing them in on initialization.

<h1 class="responsive" data-scrollable="true">Long Text With Scrollable Support</h1>

3. Initialize the plugin.

<script type="text/javascript">

4. All the available options.

<script type="text/javascript">
compression: 10,
scrollable: false,
scrollSpeed: 1000,
scrollResetSpeed: 300,
onResizeEvent: true

Change log:


  • v1.3.4


  • v1.3.0: ES5 --> ES6


  • fix method call issue

v1.2.1 (2014-09-05)

  • add throttle support

v1.2.0 (2014-05-15)

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.