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'>