A tiny jQuery plugin for truncating multiple lines of text

Related tags

Video/Audio succinct
Overview

Succinct

A tiny jQuery plugin for truncating multiple lines of text

How does it work?

Succinct shortens your text to a specified size, and then adds an ellipsis to the end.

Demo

Live Demo: http://micjamking.github.io/succinct/

Usage

Specify the elements that you would like to truncate as a selector, and then set the size parameter to the amount you would like to see. For example, if you would like to truncate all elements with a specific class, ie. <p class="truncate"> to 120 characters...

<script>
    $(function(){
        $('.truncate').succinct({
            size: 120
        });
    });
</script>

By default, the plugin truncates text to 240 characters.

To change the ellipsis to an HTML unicode arrow "→"...

<script>
    $(function(){
        $('.truncate').succinct({
            omission: '&rarr;'
        });
    });
</script>

By default, the plugin also removes the set of 32 ASCII special characters at the end of words, ie. ! " # $ and so on. To disable this behavior...

<script>
    $(function(){
        $('.truncate').succinct({
            ignore: false
        });
    });
</script>

Details

Copyright

MIT license Copyright (c) 2014 Mike King (@micjamking)

Comments
  • Read more link

    Read more link

    I really like the plugin as a matter of fact I will be using for my next project. I realized that succinct only truncates the desired text it doesn't a read more link that can allow readers finish reading the article. I do like to mention that I av not fully checked it out so if the read more function is already there please ignore else please update. Thanks.

    enhancement invalid 
    opened by adekoyejoakinhanmi 9
  • Truncate text without spaces

    Truncate text without spaces

    I would love to see a truncate of text without space. Something like a url can be very long. I have a table with logs and some urls are too long, currently I just get "..." but I would like to see "/home?something=sldvjhsljk..."

    invalid 
    opened by DavidDeSloovere 6
  • Trying to use Succinct on links

    Trying to use Succinct on links

    Hello,

    Im trying to use your great plugin on links. For example if one client have uploaded a file that has a very long name then my application will create a link with a very long text that the end user needs to click in order to open the file.

    I would like to use your plugin to shorten that text with "..." but it does seem to work on Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

    What am i doing wrong? Code im using is $('.fileLink').succinct({ size: 120 });

    Best Regards Ivan

    bug duplicate 
    opened by Ballpin 3
  • Using .succint with a js matchMedia

    Using .succint with a js matchMedia

    Nice plugin!

    Playing around with .succinct today - calling it from a javascript media query. As the query sets a smaller .succinct size the textDefault truncates nicely. If the query tries to set a larger .succinct size it appears as if the textDefault is no longer based on the original but rather on the current. As a result, the only way to view a larger truncated length is to refresh the browser.

    Seems like you figured this out with the live demo input button. It would be great to have a reset we can call into the .succint plugin that works similarly.

    Haven't quite figured that out yet though.

    question 
    opened by Design2Well 2
  • Show Max Characters & How Many Left Are Allowed

    Show Max Characters & How Many Left Are Allowed

    It would be nice to be able to show how many characters are allowed, and how many characters remain available. For example, someone would be typing in a textbox to leave a comment, and it would be useful to limit the characters in their comment.

    enhancement wontfix 
    opened by abaney 2
  • Allow HTML tags inside truncated elements

    Allow HTML tags inside truncated elements

    Currently, succinct strips out inline HTML tags. The plugin should recognize html tags, and if the closing tag is past the character count for which the text is being truncated, it needs to add the appropriate closing tag back in.

    bug 
    opened by micjamking 2
  • Moved 'use strict' to live in the wrapper function so it won't interfere with concatenation.

    Moved 'use strict' to live in the wrapper function so it won't interfere with concatenation.

    JSLint warns to use the function form of "use strict". Moving it within the function wrapper helps to not interfere with other scripts when concatenating.

    Ref. http://www.yuiblog.com/blog/2010/12/14/strict-mode-is-coming-to-town/

    enhancement 
    opened by simplesessions 1
  • Add an omission option that allows you to specify the string at the end of the text.

    Add an omission option that allows you to specify the string at the end of the text.

    By default, the omission is three dots (faux ellipses).

    Use case: "The man in the barn unlocked the door to the animal cage. He continued to do this to several other random doors in town... (read more)"

    Name of the "omission" option mimics Rails' truncate() method option of the same name - http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-truncate

    enhancement 
    opened by simplesessions 1
  • Remove ugly chars from end with regex

    Remove ugly chars from end with regex

    I noticed in the demo (http://micjamking.github.io/succinct/) that if you use the character count as 30 it leaves a "," at the end. this bothered me so i made a really simple addition that matches a regex at the end and removes characters like:

    *,.{[(<¦¬~^

    this is set as an option so the user can change, remove or whatever. if set to 'false' it wont try to remove.

    Sorry about the tab/space issues. not a lot really changed, but my IDE changed all the spacing.

    enhancement 
    opened by simeydotme 0
  • Demo not working

    Demo not working

    The demo is not working.

    Also it would be helpful if the demo indicated which unit the "size" field expects (which I eventually realized is characters, not lines or px height as I would have expected.)

    opened by ashleedawg 0
  • adding onTruncate callback

    adding onTruncate callback

    adding onTruncate callback so additional function can be executed, I use this approach mainly to add bootstrap tooltip, only when the text got truncated

    opened by felixsusanto 0
  • Add title attribute?

    Add title attribute?

    Handy plugin. It would be more usable if the plugin added a title attribute to the element as soon as text gets truncated. The value of the title attribute is the full text (not truncated). This mimics most browser's default behavior (if text gets truncated by CSS): they show a tooltip on hover displaying the full text string.

    enhancement 
    opened by thomasbyttebier 0
Releases(v1.1.0)
  • v1.1.0(Oct 5, 2014)

    • Resolved issue #6: Allow HTML tags inside truncated elements
    • Adding Grunt to the project to run tasks for the build process
    • Updated project date & versions in bower.json and README.md
    • Resolved jshint issues
    • Added grunt-buildcontrol to project to assist with build releases
    • Cleaned up project structure and re-styled landing page
    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Oct 5, 2014)

Owner
Mike King
Creative Developer | Design ⤫ Animation ⤫ Technology
Mike King
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 7 Dec 15, 2022
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 6 Aug 2, 2022
Bot WhatsApp multiple session { session nya lebih dari satu }

Panel Pterodaktyl platform Daftar panel pterodaktyl agar mendapatkan Runtime 24/7 Link Panel Register Panel login Register Dulu & Dapatakan panel nya

null 17 Nov 22, 2022
A tiny, minimalistic JS music player

A tiny, minimalistic JS music player. It's around 2 kilobytes and it's super beautiful. Installation From CDN Include with <script src="https://unpkg.

hunor karamán 33 Dec 30, 2022
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Introducing FitVids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry

Dave Rupert 4.8k Dec 24, 2022
Somewhat light jQuery pagination plugin thing.

jq-paginator Somewhat light jQuery pagination plugin thing. Inspired by other pagination libraries, but hopefully a bit simpler. Usage Pass options as

null 1 Jan 18, 2021
A Twitter bot which quote-tweets tweets without alt text

alt-alert-twitter-bot A Twitter bot engine which quote-tweets tweets without alt text. Originally used for @UKGovAltBot, @UKCouncilAltBot and @USGovAl

Matt Eason 6 Oct 2, 2022
jPlayer : HTML5 Audio & Video for jQuery

jPlayer : HTML5 Audio & Video for jQuery Gitter Support for Zepto 1.0+ compiled with the data module. What is jPlayer? jPlayer is a jQuery/Zepto plugi

jPlayer 4.6k Dec 27, 2022
JavaScript plugin for playing sounds and music in browsers

JavaScript plugin for playing sounds on user actions and page events. Version: 3.0.7 Project page and demos Download ZIP Support the plugin on GitHub

Denis Ineshin 704 Sep 24, 2022
A Cockpit plugin to easily manage samba and NFS file sharing.

cockpit-file-sharing A Cockpit plugin to easily manage samba and NFS file sharing. Table of Contents General Features Samba Manager Screenshot NFS Man

45Drives 190 Jan 3, 2023
An Betterdiscord plugin that gives the capability to the user send all discord stickers, expect wumpus default stickers.

allstickersexpectwumpusstickers An Betterdiscord plugin that gives the capability to the user send all discord stickers, expect wumpus default sticker

null 2 May 23, 2022
An open source Javascript framework for detecting the Adobe Flash Player plugin and embedding Flash (swf) files.

— IMPORTANT UPDATE —¶ ↑ SWFObject is no longer in active development. Flash Player is on the decline, and the authors of SWFObject have moved on to ot

null 1.2k Nov 27, 2022
AutoScroll is a plugin for BetterDiscord that brings the mouse wheel button autoscroll feature to the GNU/Linux and macOS client.

AutoScroll AutoScroll is a plugin for BetterDiscord that brings the mouse wheel button autoscroll feature to the GNU/Linux and macOS client. This plug

Luna 12 Dec 14, 2022
A BetterDiscord plugin for showing what you're listening from Last.fm.

LastFMRichPresence BetterDiscord Plugin This plugin allows you to show what you're listening via Last.fm. You can set it up for Soundcloud, Youtube Mu

dimden 9 Dec 16, 2022
LazyLoad Embed YouTube Player - simple and lightweight plugin - pure JavaScript

Youtube LazyLoad LazyLoad Embed Youtube Player - simple and lightweight plugin - pure JavaScript Status View Preview Table of contents Status Quick St

The MUDA Organization 25 Nov 29, 2022
LazyLoad Embed Vimeo Player - simple and lightweight plugin - pure JavaScript

Vimeo LazyLoad LazyLoad Embed Vimeo Player - simple and lightweight plugin - pure JavaScript Status View Preview Table of contents Status Quick Start

The MUDA Organization 23 Nov 3, 2022
Music control plugin for decky-loader.

MusicControl Music control plugin for decky-loader. Usage MusicControl allows you to control any playing media that implements the MediaPlayer2.Player

Miro Bouma 10 Dec 16, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023