Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ellipses with all npm packages installed. Try it out:

var ellipses = require("ellipses")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ellipses v1.0.8

Intentional omission of a word, sentence, or whole section from an element based on javascript with a mobile responsive default tooltip attached to it.

Ellipses

Ellipses add a string in the word boundary.

Generally, ellipsis was added at the end of the words in the element instead it can be added at the start of the element

What's new in this module

Generally, While adding an ellipsis to the word, one needs to mention how many character ellipsis needs to be added, In this ellipses will be added based on the container width and height.If the container width increases or decrease ellipses will change.

  • No dependencies

Options

showChar
  • How many character need to displayed. eg. showChar : 1 ,showChar : "auto"

ellipsesPosition

  • Where the ellipses need to be added (default:"start")

ellipsestext

  • Text to be appended (default : "...")

tooltip

  • pack
    • Display 'tooltip' when hover over the ellipses text (default:"false").
  • text
    • To display entire text in the tooltip or only the truncated text.(default : "true")    true - To display entire text    false - To display truncated text

Examples

    var ellipses = require('ellipses');
    var otps = {
            showChar : 50, 
            ellipsesPosition : "start", 
            tooltip :{           
                pack : true, 
                text : true  
            },
            ellipsestext : ".." 
          };

    Ellipses(".ellipses",otps); //.ellipses is selector

You can provide an alternative ellipses character, or "character count" like so:

    var ellipses = require('ellipses');
    var otps = {
            showChar : "auto", 
            ellipsesPosition : "end", 
            tooltip :{           
                pack : true, 
                text : true  
            },
            ellipsestext : "END"    
          };
    ellipses( '#description', opts);

You can install it with :

    npm install ellipses --save

Include CSS for tooltip

.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 50vw;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    text-align: justify;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

or

Clone the repo.Include this files.

<script src=".static/js/app.js"></script>
<link rel='stylesheet' href='./static/css/style.css'>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free