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

0.0.3 • Public • Published

Triple dots

Triple dots 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.

When using triple-dots 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.

How to use

<!DOCTYPE html>

    <meta charset="utf-8"/>
    <meta name="author" content="#"/>

    <title>triple-dots, javascript plugin for multiple line content ellipsis.</title>
    <style type="text/css" media="all">
        body {
            padding: 0;
            margin: 0;

        body {
            background-color: #eed;
            font-family: Arial, Helvetica, Verdana;
            line-height: 20px;
            color: #222538;
            padding: 50px;

            -webkit-text-size-adjust: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale

        :first-child {
            margin-top: 0;

        :last-child {
            margin-bottom: 0;

        p {
            margin: 10px 0;

        a {
            color: inherit;
            text-decoration: underline;

        .wrapper {
            box-sizing: border-box;
            width: 80%;
            max-width: 600px;
            min-width: 220px;
            margin: 0 auto;

        .example {
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            background: #222538;
            background: -webkit-linear-gradient(bottom left, #222538, #46454d);
            background: linear-gradient(to top right, #222538, #46454d);

            color: #eed;
            font-size: 20px;
            line-height: 30px;
            padding: 50px;
            margin: 50px -50px;
            overflow: hidden;

        .example > div {
            max-height: 250px;

        /* readable pathnames */
        .example ul,
        .example ol,
        .example li {
            display: block;
            list-style: none;
            padding: 0;
            margin: 0;

        .example li {
            height: 35px;
            padding: 7px 0;

        .example li + li {
            border-top: 1px solid rgba(255, 255, 255, 0.2);

        /* toggle full story */
        .example > .full-story {
            max-height: initial;

        .example .toggle:before {
            content: 'Show more';

        .example > .full-story .toggle:before {
            content: 'Show less';

        .oldbrowser {
            display: none;

        @media screen and (min-width: 0\0
        ) {
            .oldbrowser {
                background: red;
                color: white;
                font-weight: bold;
                font-size: 20px;
                line-height: 1.5;
                display: block;
                padding: 50px;
                margin: 50px -50px;

<div class="wrapper">

    <div class="oldbrowser">
        <big>Oh no!</big><br/>
        You're using an old browser.
        Although the TripleDots plugin will work in older browsers (although you might need some polyfills),
        these examples use modern JS your browser probably doesn't understand.

        <p>Javascript plugin for truncating multiple line content on a webpage.<br/>
            Resize your browser to see the examples below in action.</p>
        <p>Documentation: <a href="#" target="_blank">Hello</a></p>

    <div class="example">
        <div id="xmpl-1">
            <h3>Truncate multiple line content</h3>
            <p><em>Lorem Ipsum</em> is simply <strong>dummy text</strong> of the printing and typesetting industry.
                It has been the industry's standard dummy text ever <strong>since the 1500s</strong>, when an unknown
                printer took a galley of type and scrambled it to make a type specimen book.
                <em>Lorem Ipsum</em> has survived not only <strong>five centuries</strong>, but also the leap into
                <strong>electronic typesetting</strong>, remaining essentially unchanged.
                <a href="#/" class="read-more">Read more &raquo;</a></p>

    <div class="example">
        <div id="xmpl-2">
            <h3>Truncate to readable pathnames</h3>

    <div class="example">
        <div id="xmpl-3">
            <h3>Toggle full story</h3>
            <div class="ticket__description loom" id="issueDescription"
                 data-bind="embed: description, highlight:{'global-search-keyword-highlight': $root.query}, checklist: description">
                <div class="markdown-body"><p>不具合の内容<br>新UIのコンタクトページにおいて、リードのノートの欄において省略表示の動作が不適切である。</p>
                    <p>動画<br><a href="" target="_blank"
                                rel="noopener noreferrer" class="loom-link-another backlog-card-checked"></a>
                    <p>Bug Description<br>In the contact page of the new UI, the abbreviation behavior of the lead's
                        note column is inappropriate.</p>
                    <p>If the input is a single line<br>"..." and "More" are displayed as if there is omitted
                        content.<br>Clicking "More" reduces the number of lines in the display.</p>
                    <p>When there are two lines of input<br>The last character of the second line is replaced by
                        "...".<br>The number of lines in the display is not decreasing.</p>
                    <p>When there are three lines of input<br>The character in the middle of the third line has been
                        replaced by "...".<br>The number of lines in the display is not decreasing.</p>
                    <p>If there are four lines of input<br>The third line is completely displayed, and the end of the
                        third line is not replaced by "...".</p>
                    <p>Expected behavior<br>Define how many lines are to be omitted.<br>The omission is not indicated
                        until the number of lines to be omitted is exceeded. (Don't show "..." and "more")<br>When the
                        number of lines to be omitted is exceeded, replace the last character of the content to be
                        displayed with "..." and display "more".</p>
                    <p>Video<br><a href="" target="_blank"
                                   rel="noopener noreferrer" class="loom-link-another backlog-card-checked"></a>
            <a class="toggle" href="#"></a>


<script src="dist/triple-dots.js"></script>

        Basic example
    new TripleDots(document.querySelector('#xmpl-1'), {

        // Prevents the <a class="read-more" /> from being removed
        keep: '.read-more'

        Truncate to readable pathnames example
        .forEach((listitem) => {

            listitem.innerHTML = '<span>' + listitem.innerHTML.split('/').join('</span><span>/') + '</span>';
            listitem.children.item(listitem.children.length - 1).classList.add('file');

            new TripleDots(listitem, {

                //	Add a slash before the ellipsis
                ellipsis: '/\u2026',

                //	Adjustment for the top- and bottom padding.
                tolerance: 20,

                // Prevents the <span class="file" /> from being removed
                keep: '.file'

        Toggle full story example
    let xmpl = document.querySelector('#xmpl-3');
    let dot = new TripleDots(xmpl, {

        // Prevents the <a class="toggle" /> from being removed
        keep: '.toggle'


    // Get the triple-dots API
    let api = dot.API;

    xmpl.addEventListener('click', (evnt) => {
        if ('.toggle')) {

            //	When truncated, restore
            if (xmpl.matches('.ddd-truncated')) {

            //	Not truncated, truncate
            else {

        For the demos
    document.body.addEventListener('click', (evnt) => {
        if ('a[href^="#/"]')) {
            alert('Thank you for clicking, but that\'s a demo link.');




The Triple dots javascript plugin is licensed under the MIT.


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.

Package Sidebar


npm i triple-dots

Weekly Downloads






Unpacked Size

79.4 kB

Total Files


Last publish


  • chantouchsek