dotdotdot.js, advanced cross-browser ellipsis for multiple line content.

Related tags

Learning resource dotdotdot-js
Overview

dotdotdot

Dotdotdot is a javascript plugin for truncating multiple line content on a webpage. It uses an ellipsis to indicate that there is more text than currently visible. Optionally, the plugin can keep a "read more" anchor visible at the end of the content, after the ellipsis.

Demo

When using dotdotdot to truncate HTML, you don't need to worry about your HTML markup, the plugin knows its way around most elements. It's responsive, so when resizing the browser, the ellipsis will update on the fly.

Need help? Have a look at the documentation.

Licence

The dotdotdot javascript plugin is licensed under the CC-BY-NC-4.0 license.
You can purchase a license if you want to use it in a commercial project.

Browser support

The dotdotdot javascript plugin targets modern browsers that support ES5, meaning Internet Explorer 10 and earlier are not supported. For Internet Explorer 11, you''ll need some polyfills. If you need support for Internet Explorer 9 or 10, use the legacy (jQuery) version: version 3.2.3.

Development

This project uses Gulp(4) to minify the JS file. If you are unfamiliar with Gulp, check this tutorial on how to get started.
Run gulp watch in the command-line to put a watch on the files and run all scripts immediately after saving your changes.

Comments
  • publish to npm

    publish to npm

    NPM is becoming the standard way to distribute JavaScript-based code libraries, both browser-based and server-based. It would be great if jQuery.dotdotdot was available on npm as well. And it's pretty simple to do this.

    I already created a package.json for you in this pull request. Simply create an npm account, log into your account locally (npm login) and then publish this to npm via npm publish.

    I noticed you are currently publishing to bower and the jQuery plug-in registry. NPM seems to be where all JavaScript dependencies (server and browser-based) are moving to. Also, the jQuery plug-in registry is no longer being maintained by the jQuery team, and no updates to libraries are being accepted. Most likely, bower will be completely replaced by npm in the near future as well.

    opened by rnicholus 15

  • "Read more" documentation

    The plugin leaves it up to the user to figure out how to make "Read more" work. There are several questions on stack overflow about it, with contradictory information, lots of code, don't work in various circumstances etc.

    I suggest adding documentation of a known good solution, ideally with support in the plugin itself. Ideally showing something like a [+] to read more and [-] to contract back again.

    opened by rogerbinns 13
  • Entire text is lost in some cases

    Entire text is lost in some cases

    This situation is difficult to reproduce at best, but what I have seen is that in some situations, when the line-height is just right, if the text to be truncated is BELOW the specified max-length, then all of the text is wiped out.

    I have a listing of titles I'm truncating and the only title's that remain in the DOM are those which are longer and therefore need truncation. All the other titles are completely erased.

    Using 1.6.13

    wontfix 
    opened by justinperkins 13
  • Fixes the bug when only first child is shown

    Fixes the bug when only first child is shown

    I've rewritten ellipsis function because I wasn't able to work with the old implementation. The new one works ok for all my examples + the buggy one when more than one child needs to be shown but it's only the first one that is shown.

    opened by pwlmaciejewski 11
  • responsive div with multiple paragraphs - text vanishes at certain widths

    responsive div with multiple paragraphs - text vanishes at certain widths

    My HTML is this:

        <body>
        <div class="box" id="dot5">
            <p>Dot5 was originally an example of an [+]/[-] box,
            but has now been adapted to include resizing.
            When closed, the box recalculates and repositions the ellipsis.
            When open, all text is shown and the box size changes to suit.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
    </body>

    and CSS styling is this:

                div.box {
                border: 1px solid #ccc;
                height: 60px;
                padding: 15px;
                /* overflow: hidden; */
            }

    and using the sample index.html with only minor changes:

            <script type="text/javascript" language="javascript">
            $(function() {
                var $dot5 = $('#dot5');
                $dot5.append(' <a class="toggle" href="#"><span class="open">More</span><span class="close">Less</span></a>');

                function createDots() {
                    $dot5.dotdotdot({
                        after: 'a.toggle',
                        watch: 'window'
                    });
                }
                function destroyDots() {
                    $dot5.trigger('destroy');
                }
                createDots();

                $dot5.on('click', 'a.toggle',
                    function() {
                        $dot5.toggleClass('opened');
                        if ($dot5.hasClass('opened')) {
                            destroyDots();
                        } else {
                            createDots();
                        }
                        return false;
                    }
                );
            });
        </script>

    then I find that resizing the browser window causes the HTML text to vanish at certain narrow browser widths.

    This seems to happen only when the "More" tag would have been placed somewhere near the junction of the two paragraphs. i.e. near to suit.</p><p>Lorem Ipsum Note that the div height is specified in the CSS.

    Is this a bug?

    opened by randomnuggets 9
  • Code execution speed

    Code execution speed

    If I have a text that contains 600 characters or more, function: this.truncate() will cost a lot of time

    hope you can to optimize the code. thanks

    opened by blitheinsz 8
  • How to use with ES6 modules?

    How to use with ES6 modules?

    I have installed this plugin throught npm and try to include it by import 'jquery.dotdotdot' since we haven't got any exports from it. But I get this error Uncaught TypeError: e(...).dotdotdot is not a function. Is there any method to include it with es6 modules? I use rollup with cjs plugin.

    opened by Safe-Mode 7
  • Read more link does not work after resize if [watch : 'window'] is present

    Read more link does not work after resize if [watch : 'window'] is present

    Bug occurs on latest Chrome.

    Steps to reproduce:

    1. Load dotdotdot with watch : 'window' and after : 'a.readmore' options.
    2. Resize window in Chrome
    3. Click on the read more link (the event does not fire)

    If I remove watch : 'window' option, it works ok.

    opened by feketegy 7
  • Question: Conflict with Foundation 5 tooltip with V3

    Question: Conflict with Foundation 5 tooltip with V3

    Hello licensed owner here, in v3.2.2 there are these lines:

    var c = document.createComment( '' );
$e.replaceWith( c );
_elms.push( this );
_coms.push( c );

    These lines for some reason conflict with Foundation 5's tooltip, regardless of initialization order. If the lines above are removed, everything seems to work. I wanted to confirm the reason for the code above, it's implications on functionality, and/or if it is required for functionality, or if it's just a comment generator/placeholder.

    Uncaught TypeError: a.getAttribute is not a function
    at Function.b.attr (VM3012 jquery.js:24)
    at Array.<anonymous> (VM3012 jquery.js:24)
    at VM3012 jquery.js:24
    at g (VM3012 jquery.js:24)
    at b.select (VM3012 jquery.js:24)
    at Function.b [as find] (VM3012 jquery.js:24)
    at HTMLDocument.handlers (VM3012 jquery.js:25)
    at HTMLDocument.dispatch (VM3012 jquery.js:25)
    at HTMLDocument.q.handle (VM3012 jquery.js:24)
    at Comment.<anonymous> (VM3012 jquery.js:25)

    https://codepen.io/anon/pen/oOxZRW

    Oddly, it does not happen when the css is unapplied.

    Thank you.

    opened by erikjohnsen6d 6
  • It works weirdly while truncate mandarin character

    It works weirdly while truncate mandarin character

    image

    From the image you can observer that the 1st row, it truncated the object title nicely according to the height i set, but when you look at the 2nd object on the 2nd row, the truncated title is too short, as the full title of the object is shown below, i don't know why it cannot truncate the title like how the 1st row do.

    image

    opened by MonsAllyAlex 6
  • Bring up to date, make it work.

    Bring up to date, make it work.

    This bundled PR addresses multiple issues:

    • This plugin now works in a browserify / CommonJS setting.
    • Syntax errors in package.json have been fixed.
    • Fix a ReferenceError that gets thrown when checking for an undefined value (see the end of the original file)
    • When the instance is destroyed, the .is-truncated class will be removed. (when a plugin is removed it should reset the markup to its original state).

    These are all changes I made in order to get this plugin working in my browserify setup. Hopefully whoever is seeing these pull requests can merge and ensure that the large number of users looking to use this in 2016 can still find some use in it. Thanks!

    opened by jonscottclark 6
  • content of string causes dotdotdot to be slow

    content of string causes dotdotdot to be slow

    I have attached a string that is being passed to dotdotdot and for some reason there is something that is causing it to be very slow. Can you please help identify the issue in the text string.txt

    this is our function

    $("#" + id).dotdotdot({ truncate: "word", height: 60, watch: false, callback: function (isTruncated, orgContent) { if (isTruncated) { $("#" + id).append('<a href="#" class="show-more" data-challengeID="' + challengeId + '">[ <i class="fa-solid fa-plus"></i> ]</a>'); } } });

    opened by slapshot94 0
  • Feature Policy warnings

    Feature Policy warnings

    We get those alerts from Firefox console when an iframe exists into dotdotdot container.

    Feature Policy: Skipping unsupported feature name “accelerometer”. 
Feature Policy: Skipping unsupported feature name “autoplay”. 
Feature Policy: Skipping unsupported feature name “clipboard-write”. 
Feature Policy: Skipping unsupported feature name “encrypted-media”. 
Feature Policy: Skipping unsupported feature name “gyroscope”. 
Feature Policy: Skipping unsupported feature name “picture-in-picture”.

    Is it something to be expected or does it need to be fixed?

    opened by ioannis-koukotzilas 0
  • fix height calculation in fits function for inline elements

    fix height calculation in fits function for inline elements

    Hi, this pull request solves a problem encountered when applying dotdotdot on line elements in the fits function. It always returned zero as the height of the element so it always returned true and did not truncate it. The solution has been to take the maximum of the different types of element height as does the jquery innerHeight function used in the previous version:

    https://github.com/jquery/jquery/blob/main/src/dimensions.js

    I have also fixed two typing that made the code not compile.

    Thanks for this very useful code!

    opened by totaltrece 0
  • Enhancement request v4.1.0 - ellipsis setting as a HTML string

    Enhancement request v4.1.0 - ellipsis setting as a HTML string

    In v4.1.0 the 'ellipsis' option is a plain text string, inserted in the DOM as a text node.

    As a feature request / suggestion, could this option be enhanced to be treated as a HTML string?

    For example, the ellipsis could be made clickable by inserting an anchor tag thus: ellipsis: ' <a class="ellipsis" href="whatever">...</a>',

    The possibilities go well beyond this example.

    Thanks!

    opened by randomnuggets 0
  • Upgrading from jQuery-dotdotdot v1.8.1 to dotdotdot.js v4.1.0 - doco request please

    Upgrading from jQuery-dotdotdot v1.8.1 to dotdotdot.js v4.1.0 - doco request please

    dotdotdot.js a great piece of software!

    Could some notes please be added to the README file, or to the website, to assist us when doing a version upgrade?

    I ask because it seems there have been a number of breaking changes made since v1.8.1, specifically in v3, and possibly v4, with very little doco to assist with the task of moving to the latest version.

    I have found, for example,

    • API calls instead of JQuery trigger() calls, (Doh!)
    • the 'after' option is now 'keep'
    • 'height' option instead of CSS height: setting
    • ...probably a bunch of other points that I am not aware of...

    Just some feedback from a dev perspective.

    Thanks!

    opened by randomnuggets 0
  • Upgrading from jQuery-dotdotdot v1.8.1 to dotdotdot.js v4.1.0 - changed behaviour?

    Upgrading from jQuery-dotdotdot v1.8.1 to dotdotdot.js v4.1.0 - changed behaviour?

    I am working through the impacts of an upgrade to v4.1.0.

    In v4.1.0, in the case of a <div> that contains multiple <p> child elements, the behaviour appears to have changed.

    Here is an example under the old version https://codepen.io/randomnuggets/pen/XWgOzwy and here is the same thing under the new version https://codepen.io/randomnuggets/pen/bGRzaoL

    Notice how, in the old version, the "...More" string appears directly after the text that it truncates. Tidy and compact. Nice.

    But in the new version, the "More" string is separate from the ellipsis and placed after the truncated paragraph. I think there is a </p> tag between the ellipsis and the 'More' string.

    Is this a deliberate change? Is there a method to achieve the old 'in-line' functionality under v4.1.0?

    Thanks!

    opened by randomnuggets 0
Releases(v4.1.0)
Owner
Fred Heusschen
I'm a creative front-end developer, I like JS and CSS and working with related toolsets and frameworks. Full bio: http://frebsite.nl/cv-en.html
Fred Heusschen
GitHub http://dotdotdot.frebsite.nl/
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
Its a Advanced Content Management System built on top of Frappe.

Go1 CMS Go1 CMS - Its a Advanced Content Management System built on top of Frappe with Advanced Page builder. Lead your business towards the future of

null 20 Dec 29, 2022
An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

BlackX-Lolipop 2 Feb 9, 2021
Create multiple files from your command line.

@marsidev/create Create multiple files from your command line. Installation npm install -g @marsidev/create Usage create <files> [options] Examples cr

Luis Marsiglia 3 Nov 25, 2022
True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

Bo 6 Mar 29, 2022
⚡🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query!

ethers-multicall ⚡ ?? Call multiple view functions, from multiple Smart Contracts, in a single RPC query! Querying an RPC endpoint can be very costly

Morpho Labs 20 Dec 30, 2022
Modern Cross Browser Testing in JavaScript using Playwright

Modern Cross Browser Testing in JavaScript using Playwright This repository contains the example code for the Modern Cross Browser Testing in JavaScri

Applitools 5 Oct 3, 2022
🦎 The cross browser extension that blends in

Rango Rango is a cross browser extension that helps you interact with web pages using your voice and talon. It does this by drawing hints with letters

David Tejada 37 Jan 3, 2023
A cross-platform browser extension that changes the way seasons are display on Crunchyroll.

Crunchyroll With Better Seasons Crunchyroll With Better Seasons is a cross-platform browser extension that changes the way seasons are displayed on Cr

null 9 Nov 4, 2022
A lightweight cross browser javascript scrollbar.

tinyscrollbar ** HELP MAINTAINER NEEDED!! ** Environments in which to use tinyscrollbar Browser support differs between the jQuery plugin and the plai

Maarten Baijs 398 Nov 9, 2022
Pretty, customisable, cross browser replacement scrollbars

jScrollPane - cross browser custom scroll bars jScrollPane is a jQuery plugin which allows you to replace a browser's default scroll bars (on an eleme

Kelvin Luck 2.2k Dec 15, 2022
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

screenfull Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoo

Sindre Sorhus 6.7k Dec 30, 2022
A jQuery plugin that adds cross-browser mouse wheel support.

jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support with delta normalization. In order to use the plugin, simply bin

jQuery 3.9k Dec 26, 2022
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...

Freewall Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nes

Minh Nguyen 1.9k Dec 27, 2022
🔨 Cross-browser JavaScript library to disable scrolling page

scroll-lock Cross-browser JavaScript library to disable scrolling page Live demo | README на русском New features 2.0 More advanced touch event handli

null 253 Dec 17, 2022
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin

Zebra Datepicker A super-lightweight, highly configurable, cross-browser date/time picker jQuery plugin Zebra_Datepicker is a small yet and highly con

Stefan Gabos 391 Dec 29, 2022
Cross-browser plugin to remove addictive features on YouTube like thumbnails, comments, previews and more...

ZenTube Installation Features Remove some (more) elements from Youtube to make it less addictive. Mix and match between the following options: Hide or

inversepolarity 57 Dec 17, 2022
Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or enter your email address and more.

Demodal Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or en

Elbert Alias 225 Jan 4, 2023