I want to truncate a text or line with ellipsis using JavaScript

Question

I m looking for a simple script which can truncate a string with ellipsis        I want to truncate something like  this is a very long string  to  this is a ve      I don t want to use CSS or PHP

User · Answer

Easiest and flexible way  JSnippet DEMO  Function style   function truncString str  max  add      add   add              return  typeof str      string   amp  amp  str length  gt  max   str substring 0 max  add   str        Prototype   String prototype truncString   function max  add      add   add              return  this length  gt  max   this substring 0 max  add   this        Usage   str    testing with some string see console output      By prototype  console log   str truncString 15               By function call  console log   truncString str 15

User · Answer

Something like   var line    foo bar lol   line substring 0  5             gives  foo b

User · Answer

KooiInc has a good answer to this  To summarise   String prototype trunc          function n             return this substr 0 n-1   this length gt n   amp hellip                   Now you can do   var s    not very long   s trunc 25       gt  not very long s trunc 5       gt  not        And if you prefer it as a function  as per  AlienLifeForm s comment   function truncateWithEllipses text  max         return text substr 0 max-1   text length gt max   amp hellip             Full credit goes to KooiInc for this

User · Answer

function truncate string  length  delimiter       delimiter   delimiter      amp hellip       return string length  gt  length   string substr 0  length    delimiter   string      var long    Very long text here and here       short    Short    truncate long  10      - gt   Very long      truncate long  10    gt  gt        - gt   Very long  gt  gt   truncate short  10      - gt   Short

User · Answer

HTML with JavaScript    lt p id  myid  gt My long long looooong text cut cut cut cut cut lt  p gt    lt script type  text javascript  gt  var myid document getElementById  myid    myid innerHTML myid innerHTML substring 0 10          lt  script gt    The result will be   My long lo      Cheers  G

User · Answer

If you want to cut a string for a specifited length and add dots use     Length to cut var lengthToCut   20      Sample text var text    The quick brown fox jumps over the lazy dog       We are getting 50 letters  0-50  from sample text var cutted   text substr 0  lengthToCut    document write cutted           Or if you want to cut not by length but with words count use      Number of words to cut var wordsToCut   3      Sample text var text    The quick brown fox jumps over the lazy dog       We are splitting sample text in array of words var wordsArray   text split           This will keep our generated text var cutted       for i   0  i  lt  wordsToCut  i     cutted    wordsArray i            Add to cutted word with space  document write cutted           Good luck

User · Answer

This will limit it to however many lines you want it limited to and is responsive  An idea that nobody has suggested  doing it based on the height of the element and then stripping it back from there   Fiddle - https   jsfiddle net hutber u5mtLznf   lt - ES6 version  But basically you want to grab the line height of the element  loop through all the text and stop when its at a certain lines height    use strict    var linesElement   3    it will truncate at 3 lines  var truncateElement   document getElementById  truncateme    var truncateText   truncateElement textContent   var getLineHeight   function getLineHeight element      var lineHeight   window getComputedStyle truncateElement   line-height      if  lineHeight      normal            sucky chrome     return 1 16   parseFloat window getComputedStyle truncateElement   font-size         else       return parseFloat lineHeight           linesElement addEventListener  change   function        truncateElement innerHTML   truncateText    var truncateTextParts   truncateText split         var lineHeight   getLineHeight truncateElement     var lines   parseInt linesElement value      while  lines   lineHeight  lt  truncateElement clientHeight        console log truncateTextParts length  lines   lineHeight  truncateElement clientHeight       truncateTextParts pop        truncateElement innerHTML   truncateTextParts join                         CSS   truncateme      width  auto  This will be completely dynamic to the height of the element  its just restricted by how many lines you want it to clip to

User · Answer

This will put the ellipsis in the center of the line   function truncate  str  max  sep             Default to 10 characters     max   max    10       var len   str length      if len  gt  max               Default to elipsis         sep   sep                    var seplen   sep length              If seperator is larger than character limit             well then we don t want to just show the seperator             so just show right hand side of the string          if seplen  gt  max                return str substr len - max                         Half the difference between max and string length             Multiply negative because small minus big             Must account for length of separator too          var n   -0 5    max - len - seplen               This gives us the centerline          var center   len 2           var front   str substr 0  center - n           var back   str substr len - center   n      without second arg  will automatically go to end of line           return front   sep   back              return str     console log  truncate  123456789abcde         123   bcde  using built-in defaults   console log  truncate  123456789abcde   8        12   cde  max of 8 characters   console log  truncate  123456789abcde   12             12345 9abcde  customize the separator     For example   1234567890 -- gt  1234   8910   And   A really long string -- gt  A real   string   Not perfect  but functional  Forgive the over-commenting    for the noobs

User · Answer

For preventing the dots in the middle of a word or after a punctuation symbol    x000D   x000D  let parseText   function text  limit   x000D    if  text length  gt  limit   x000D        for  let i   limit  i  gt  0  i--   x000D            if text charAt i           amp  amp   text charAt i-1          text charAt i-1          text charAt i-1             x000D                return text substring 0  i           x000D              x000D          x000D         return text substring 0  limit           x000D      x000D    else x000D        return text  x000D     x000D       x000D       x000D  console log parseText  1234567 890  5        gt  gt  12345    x000D  console log parseText  1234567 890  8        gt  gt  1234567    x000D  console log parseText  1234567 890  15       gt  gt  1234567 890 x000D   x000D   x000D

User · Answer

Try this  function shorten text  maxLength  delimiter  overflow      delimiter   delimiter      amp hellip      overflow   overflow    false    var ret   text    if  ret length  gt  maxLength        var breakpoint   overflow   maxLength   ret substr maxLength  indexOf        ret substr 0  maxLength  lastIndexOf           ret   ret substr 0  breakpoint    delimiter        return ret       document  ready function       var  editedText       edited text      var text    editedText text       editedText text shorten text  33         false          Checkout a working sample on Codepen http   codepen io Izaias pen QbBwwE

User · Answer

function truncate input       if  input length  gt  5          return input substring 0  5                   return input      or in ES6 const truncate    input    gt  input length  gt  5      input substring 0  5         input

[javascript] I want to truncate a text or line with ellipsis using JavaScript

Examples related to javascript

Examples related to string

Examples related to truncate