Insert ellipsis into HTML tag if content too wide

Question

I have a webpage with an elastic layout that changes its width if the browser window is resized   In this layout there are headlines  h2  that will have a variable length  actually being headlines from blogposts that I don t have control over   Currently - if they are wider than the window - they are broken into two lines   Is there an elegant  tested  cross-browser  solution - for example with jQuery - that shortens the innerHTML of that headline tag and adds       if the text would be too wide to fit into one line at the current screen container width

User · Answer

The following CSS only solution for truncating text on a single line works with all browers listed at http://www.caniuse.com as of writing with the exception of Firefox 6.0. Note that JavaScript is totally unnecessary unless you need to support wrapping multiline text or earlier versions of Firefox.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

If you need support for earlier versions of Firefox check out my answer on this other question.

User · Answer

This is similar to Alex s but does it in log time instead of linear  and takes a maxHeight parameter   jQuery fn ellipsis   function text  maxHeight      var element     this     var characters   text length    var step   text length   2    var newText   text    while  step  gt  0        element html newText       if  element outerHeight    lt   maxHeight          if  text length    newText length            step   0          else           characters    step          newText   text substring 0  characters                 else         characters -  step        newText   newText substring 0  characters             step   parseInt step   2         if  text length  gt  newText length        element html newText               while  element outerHeight    gt  maxHeight  amp  amp  newText length  gt   1          newText   newText substring 0  newText length - 1         element html newText

User · Answer

I built this code using a number of other posts  with the following enhancements    It uses a binary search to find the text length that is just right  It handles cases where the ellipsis element s  are initially hidden by setting up a one-shot show event that re-runs the ellipsis code when the item is first displayed   This is handy for master-detail views or tree-views where some items aren t initially displayed  It optionally adds a title attribute with the original text for a hoverover effect  Added display  block to the style  so spans work It uses the ellipsis character instead of 3 periods  It auto-runs the script for anything with the  ellipsis class   CSS    ellipsis           white-space  nowrap          overflow  hidden          display  block      ellipsis multiline           white-space  normal      jquery ellipsis js   function               this is a binary search that operates via a function        func should return  lt  0 if it should search smaller values        func should return  gt  0 if it should search larger values        func should return   0 if the exact value is found        Note  this function handles multiple matches and will return the last match        this returns -1 if no match is found     function binarySearch length  func            var low   0          var high   length - 1          var best   -1          var mid           while  low  lt   high                mid        low   high    2        is a fast way to convert something to an int             var result   func mid               if  result  lt  0                    high   mid - 1                else if  result  gt  0                    low   mid   1                else                   best   mid                  low   mid   1                                   return best                setup handlers for events for show hide       each   show    toggleClass    addClass    removeClass    function                 get the old function  e g    fn show   or   fn hide         var oldFn     fn this             fn this    function                      get the items that are currently hidden             var hidden   this find   hidden   add this filter   hidden                     run the original function             var result   oldFn apply this  arguments                   for all of the hidden elements that are now visible             hidden filter   visible   each function                         trigger the show msg                   this  triggerHandler  show                                 return result                             create the ellipsis function        when addTooltip   true  add a title attribute with the original text       fn ellipsis   function  addTooltip             return this each function                  var el     this                if  el is   visible                       if  el css  overflow        hidden                         var content   el html                        var multiline   el hasClass  multiline                        var tempElement     this cloneNode true                            hide                            css  position    absolute                            css  overflow    visible                            width multiline   el width      auto                            height multiline    auto    el height                                               el after tempElement                        var tooTallFunc   function                              return tempElement height    gt  el height                                                var tooWideFunc   function                              return tempElement width    gt  el width                                                var tooLongFunc   multiline   tooTallFunc   tooWideFunc                          if the element is too long                        if  tooLongFunc                               var tooltipText   null                             if a tooltip was requested                            if  addTooltip                                   trim leading trailing whitespace                                and consolidate internal whitespace to a single space                             tooltipText     trim el text    replace   s s  g                                                           var originalContent   content                           var createContentFunc   function  i                                content   originalContent substr 0  i                               tempElement html content                                                               var searchFunc   function  i                                createContentFunc i                               if  tooLongFunc                                      return -1                                                            return 0                                                      var len   binarySearch content length - 1  searchFunc                            createContentFunc len                            el html tempElement html                                 add the tooltip if appropriate                         if  tooltipText     null                                el attr  title   tooltipText                                                                        tempElement remove                                                else                      if this isn t visible  then hook up the show event                 el one  show   function                            this  ellipsis addTooltip                                                                ellipsification for items with an ellipsis       document  ready function                  ellipsis   ellipsis true               jQuery

User · Answer

I made a really cool jQuery plugin for handling all varieties of ellipsis of text is one called ThreeDots   http   tpgblog com threedots  It s much more flexible than the CSS approaches  and supports much more advanced  customizable behaviors and interactions   Enjoy

User · Answer

There s a solution for multi-line text with pure css  It s called line-clamp  but it only works in webkit browsers  There is however a way to mimic this in all modern browsers  everything more recent than IE8   Also  it will only work on solid backgrounds because you need a background-image to hide the last words of the last line  Here s how it goes   Given this html    lt p class  example  id  example-1  gt      Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  p gt    Here s the CSS   p       position relative      line-height 1 4em      height 4 2em          3 times the line-height to show 3 lines      p  after       content            font-weight bold      position absolute      bottom 0      right 0      padding 0 20px 1px 45px      background url ellipsis bg png  repeat-y      ellipsis bg png being an image of the same color of your background  that would be about 100px wide and have the same height as your line-height   It s not very pretty  as your text may be cut of in the middle of a letter  but it may be useful in some cases   Reference  http   www css-101 org articles line-clamp line-clamp for non webkit-based browsers php

User · Answer

you can do this much easier with css only  for example   sass mode   truncatedText      font-size  0 875em     line-height  1 2em     height  2 4em     2 lines   line-height     amp  after         content                   and you have ellipsis

User · Answer

trunk8 jQuery plugin supports multiple lines  and can use any html  not just ellipsis characters  for the truncation suffix  https   github com rviscomi trunk8  Demo here  http   jrvis com trunk8

User · Answer

There is a simple jQuery solution by Devon Govett   https   gist github com digulla 5796047     To use  just call ellipsis   on a jQuery object  For example          span   ellipsis

User · Answer

I couldn t find a script that worked exactly as I wanted it so did my own for jQuery - quite a few options to set with more on their way     https   github com rmorse AutoEllipsis

User · Answer

Pure CSS Multi-line Ellipsis for text content    x000D   x000D   container  x000D      position  relative      Essential    x000D      background-color   bbb      Essential    x000D      padding  20px     Arbritrary    x000D    x000D   text   x000D      overflow  hidden      Essential    x000D        text-overflow  ellipsis  Not needed    x000D      line-height  16px      Essential    x000D      max-height  48px     Multiples of line-height    x000D    x000D   ellipsis   x000D      position  absolute    Relies on relative container    x000D      bottom  20px     Matches container padding    x000D      right  20px     Matches container padding    x000D      height  16px     Matches line height    x000D      width  30px     Arbritrary    x000D      background-color  inherit     Essential   or specify a color    x000D      padding-left  8px     Arbritrary    x000D    x000D   lt div class  container  gt  x000D       lt div class  text  gt  x000D          Lorem ipsum dolor sit amet  consectetur eu in adipiscing elit  Aliquam consectetur venenatis blandit  Praesent vehicula  libero non pretium vulputate  lacus arcu facilisis lectus  sed feugiat tellus nulla eu dolor  Nulla porta bibendum lectus quis euismod  Aliquam volutpat ultricies porttitor  Cras risus nisi  accumsan vel cursus ut  sollicitudin vitae dolor  Fusce scelerisque eleifend lectus in bibendum  Suspendisse lacinia egestas felis a volutpat  Aliquam volutpat ultricies porttitor  Cras risus nisi  accumsan vel cursus ut  sollicitudin vitae dolor  Fusce scelerisque eleifend lectus in bibendum  Suspendisse lacinia egestas felis a volutpat  x000D       lt  div gt  x000D       lt div class  ellipsis  gt     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Please checkout the snippet for a live example

User · Answer

A more flexible jQuery plugin enabling you to keep a element after the ellipsis  for example a  read-more  button  and update onWindowResize  It also works around text with markup   http   dotdotdot frebsite nl

User · Answer

Here s another JavaScript solution  Works very good and very fast   https   github com dobiatowski jQuery FastEllipsis  Tested on Chrome  FF  IE on Windows and Mac

User · Answer

Here is a nice widget plugin library which has ellipsis built in  http   www codeitbetter co uk widgets ellipsis  All you need to do it reference the library and call the following     lt script type  text javascript  gt        document  ready function                 ellipsis 10   Ellipsis             numberOfCharacters  10            showLessText   less             showMoreText   more                       lt  script gt    lt div class  ellipsis 10  gt      Some text here that s longer than 10 characters    lt  div gt

User · Answer

Well  one simple solution  that doesn t quite add the        but does prevent the  lt h2 gt  from breaking into two lines would be to add this bit of css    h2       height some height in px     this is the height of the line        overflow hidden     so that the second  or third  fourth  etc                           line is not visible        I gave it some more thought  and I came up with this solution  you have to wrap the textual contents of your h2 tag with another tag  e g  a span   or alternatively wrap the h2s with something that has the given height  and then you can use this sort of javascript to filter out the unneeded words   var elems   document getElementById  conainter of h2s                         getElementsByTagName  h2         for   var i   0  l   elems length  i  lt  l  i              var span   elems item i  getElementsByTagName  span   0           if   span offsetHeight  gt  elems item i  offsetHeight                 var text arr   span innerHTML split                   for   var j   text arr length - 1  j gt 0   j--                    delete text arr j                   span innerHTML   text arr join                               if   span offsetHeight  lt                                            elems item i  offsetHeight                        break

User · Answer

Just in case y all end up here in 2013 - here is a pure css approach I found here  http   css-tricks com snippets css truncate-string-with-ellipsis    truncate     width  250px    white-space  nowrap    overflow  hidden    text-overflow  ellipsis      It works well

User · Answer

I d done something similar for a client recently   Here s a version of what I did for them  example tested in all latest browser versions on Win Vista    Not perfect all around the board  but could be tweaked pretty easily   Demo  http   enobrev info ellipsis   Code    lt html gt       lt head gt           lt script src  http   www google com jsapi  gt  lt  script gt           lt script gt                          google load  jquery    1 2 6                google setOnLoadCallback function                         longtext   each function                         if    this  attr  scrollWidth    gt    this  width                               more       lt b class  more  gt  amp hellip  lt  b gt                                 add it to the dom first  so it will have dimensions                           this  append  more                               now set the position                          more css                               top   -      this  height      px                               left     this  attr  offsetWidth   -  more attr  offsetWidth       px                                                                                                 lt  script gt            lt style gt               longtext                   height  20px                  width  300px                  overflow  hidden                  white-space  nowrap                  border  1px solid  f00                              more                   z-index  10                  position  relative                  display  block                  background-color   fff                  width  18px                  padding  0 2px                         lt  style gt       lt  head gt       lt body gt           lt p class  longtext  gt This is some really long text   This is some really long text   This is some really long text   This is some really long text  lt  p gt       lt  body gt   lt  html gt

User · Answer

lt html gt   lt head gt       lt  -- By Warren E  Downs  copyright 2016   Based loosely on a single multiline JQuery using example by Alex      but optimized to avoid JQuery  to use binary search  to use CSS text-overflow  ellipsis for end      and adding marquee option as well      Credit  Marquee  http   jsfiddle net jonathansampson xxuxd              JQuery version  http   stackoverflow com questions 536814 insert-ellipsis-into-html-tag-if-content-too-wide              by Alex  http   stackoverflow com users 71953 alex               Improved with Binary Search as suggested by StanleyH  http   stackoverflow com users 475848 stanleyh      -- gt       lt meta content  text html charset utf-8  http-equiv  Content-Type  gt       lt meta content  utf-8  http-equiv  encoding  gt       lt style gt            single               overflow hidden              white-space  nowrap              width  10em              padding  10px              margin  0 auto              border  solid 1px blue                      multiline               overflow  hidden              white-space  wrap              width  10em              height  4 5em              padding  10px              margin  0 auto              border  solid 1px blue                      marquee               overflow  hidden              width  40em              padding  10px              margin  0 auto              border  solid 1px blue              lt  style gt       lt script gt          var  marqueeNumber 0             mode start end middle         function clipText text  len  mode                if  mode    mode  end                 else   mode mode toLowerCase                  if mode     start     return   amp hellip   clipText text len   start                  if mode      start     return text substr text length - len                 if mode     middle                      return clipText text  len 2   end     clipText text  len 2    start                              return text substr 0  len      amp hellip                       function generateKeyframes clsName  start  end                var sec 5              var totalLen parseFloat start -parseFloat end               if start indexOf  em    gt  -1         sec Math round totalLen 3                 else if start indexOf  px    gt  -1    sec Math round totalLen 42                  var style   document createElement  style                style type    text css               style innerHTML    body                  document getElementsByTagName  head   0  appendChild style               this stylesheet   document styleSheets document styleSheets length-1               try                   this stylesheet insertRule     clsName     n                            animation    clsName     sec  s linear infinite  n                          n   this stylesheet rules length                   this stylesheet insertRule     clsName   hover   n                            animation-play-state  paused n                          n   this stylesheet rules length                   this stylesheet insertRule   keyframes   clsName     n                            0      text-indent    start     n                            100    text-indent    end     n                            this stylesheet rules length                 catch  e                    console log e message                                    function addClone el  multiline  estyle                if  estyle                     try   estyle window getComputedStyle el                     catch e    return null                              var t   el cloneNode true               var s t style                s display  none               s visibility  hidden      WARNING  Infinite loop if this is not hidden  e g  while testing              s display  inline-block               s background  black               s color  white               s position  absolute               s left 0              s top 0              s overflow  visible               s width  multiline   parseFloat estyle width     auto                s height  multiline    auto    parseFloat estyle height                 el parentNode insertBefore t  el nextSibling                return t                    function getTextWidth el  multiline                var t addClone el  multiline               if  t    return null                var ts window getComputedStyle t               var w ts width              if multiline                    var es window getComputedStyle el                   var lines Math round parseInt ts height  parseInt es height   2 0 5                  w w                     var unit        Extract unit                 for var xa 0  xa lt w length  xa                          var c w xa                       if c  lt    0     c  gt    9     unit w substr xa-1                                       w parseFloat w                   w  lines     Multiply by lines                 w  unit     Append unit again                           t parentNode removeChild t               return w                        cls class of element to ellipsize            mode start end middle marq  scrolling marquee instead of clip          function ellipsis cls  mode                mode mode toLowerCase                var elems document getElementsByClassName cls               for xa in elems                    var el elems xa                   var multiline   el className   el className indexOf  multiline    gt  -1   true                  if mode     marq                                var w getTextWidth el  multiline                       if  w    continue                        var mCls  dsmarquee    marqueeNumber                         var es window getComputedStyle el                       generateKeyframes mCls es width   -  w                       el className      mCls                       continue                                     if mode     end   amp  amp   multiline    el style textOverflow  ellipsis   continue                    var estyle null                  try   estyle window getComputedStyle el                     catch e    continue                    if estyle overflow     hidden                         var text   el innerHTML                      var t addClone el  multiline  estyle                        function height                             var ts window getComputedStyle t                           var es window getComputedStyle el                           return parseFloat ts height  - parseFloat es height                                              function width                              var ts window getComputedStyle t                           var es window getComputedStyle el                           return parseFloat ts width  - parseFloat es width                                               var tooLong   multiline   height   width                       var len text length                      var diff 1                      var olen 0                      var jump len 2                      while  len  gt  0                            var diff tooLong                            if diff  gt  0    len- jump  jump  2                            else if diff  lt  0    len  jump                            len Math round len                             alert  len   len   olen   olen   diff   diff   jump   jump   t   JSON stringify t innerHTML                            t innerHTML clipText text  len  mode                           if olen    len    break                            olen len                                            el innerHTML t innerHTML                      t parentNode removeChild t                                                  break                  t style visibility  hidden                                    function testHarness                 ellipsis  ellipsis1    start                 ellipsis  ellipsis2    end                 ellipsis  ellipsis3    middle                 ellipsis  marquee    marq                  lt  script gt       lt  head gt       lt body onload  testHarness    gt       lt div class  single ellipsis1  style  float left  gt some long text that should be clipped left lt  div gt       lt div class  single ellipsis2  style  float right  gt right clip long text that should be clipped lt  div gt       lt div class  single ellipsis3  style  float center  gt some long text that should be clipped in the middle lt  div gt        lt br   gt        lt p class  single marquee  gt Windows 8 and Windows RT are focused on your life   your friends and family  your apps  and your stuff  With new things like the  lt a href  http   windows microsoft com en-US windows-8 start-screen  gt Start screen lt  a gt    lt a href  http   windows microsoft com en-US windows-8 charms  gt charms lt  a gt   and a  lt a href  http   windows microsoft com en-US windows-8 microsoft-account  gt Microsoft account lt  a gt   you can spend less time searching and more time doing  lt  p gt       amp nbsp        lt br   gt        lt div class  multiline ellipsis1  style  float left  gt Test test test test test test  some more long text  such as asdasdasdasdasd  that should be multiline clipped left    lt  div gt        lt div class  multiline ellipsis2  style  float right  gt right clip multiline long text  such as Test test test test test test  and some more long text that should be multiline clipped right  lt  div gt        lt div class  multiline ellipsis3  style  float center  gt Test test test test test test  some more long text  such as asdasdasdasdasd  that should be multiline clipped in the middle    lt  div gt        lt br   gt        lt p class  multiline marquee  gt Multiline Marquee  Windows 8 and Windows RT are focused on your life   your friends and family  your apps  and your stuff  With new things like the  lt a href  http   windows microsoft com en-US windows-8 start-screen  gt Start screen lt  a gt    lt a href  http   windows microsoft com en-US windows-8 charms  gt charms lt  a gt   and a  lt a href  http   windows microsoft com en-US windows-8 microsoft-account  gt Microsoft account lt  a gt   you can spend less time searching and more time doing  lt  p gt       amp nbsp        lt  body gt   lt  html gt

User · Answer

Just like  acSlater I couldn t find something for what I needed so I rolled my own  Sharing in case anyone else can use    Method   ellipsisIfNecessary mystring maxlength     Usage   trimmedString   ellipsisIfNecessary mystring 50     Code and Demo Link  https   gist github com cemerson 10368014

User · Answer

There s actually a pretty straightforward way to do this in CSS exploiting the fact that IE extends this with non-standards and FF supports  after  You can also do this in JS if you wish by inspecting the scrollWidth of the target and comparing it to it s parents width  but imho this is less robust    Edit  this is apparently more developed than I thought  CSS3 support may soon exist  and some imperfect extensions are available for you to try    http   www css3 info preview text-overflow  http   ernstdehaan blogspot com 2008 10 ellipsis-in-all-modern-browsers html   That last one is good reading

User · Answer

I rewrote Alex s function to use to the MooTools library  I changed it a bit to word jump rather than add the ellipsis in the middle of a word   Element implement   ellipsis  function         if this getStyle  overflow       hidden             var text   this get  html            var multiline   this hasClass  multiline            var t   this clone                setStyle  display    none                setStyle  position    absolute                setStyle  overflow    visible                setStyle  width   multiline   this getSize   x    auto                setStyle  height   multiline    auto    this getSize   y               inject this   after             function height     return t measure t getSize  y  gt  this getSize   y             function width     return t measure t getSize   x  gt  this getSize   x              var func   multiline   height bind this    width bind this            while  text length  gt  0  amp  amp  func                  text   text substr 0  text lastIndexOf                    t set  html   text                              this set  html   t get  html             t dispose

User · Answer

My answer only supports single line text  Check out gfullam s comment below for the multi-line fork  it looks pretty promising   I rewrote the code from the first answer a few times  and I think this should be the fastest   It first finds an  Estimated  text length  and then adds or removes a character until the width is correct    The logic it uses is shown below     After an  estimated  text length is found  characters are added or removed until the desired width is reached   I m sure it needs some tweaking  but here s the code    function             fn ellipsis   function              return this each function                  var el     this                if  el css  overflow       hidden                     var text   el html   trim                    var t     this cloneNode true                                            hide                                            css  position    absolute                                            css  overflow    visible                                            width  auto                                            height el height                                                              el after t                    function width     return t width    gt  el width                        if  width                           var myElipse                                t html text                        var suggestedCharLength    text length   el width     t width    - myElipse length                       t html text substr 0  suggestedCharLength    myElipse                        var x   1                      if  width                              while  width                                  t html text substr 0  suggestedCharLength - x    myElipse                               x                                                                        else                           while   width                                  t html text substr 0  suggestedCharLength   x    myElipse                               x                                                      x--                          t html text substr 0  suggestedCharLength   x    myElipse                                              el html t html                         t remove                                                          jQuery

User · Answer

I ve got a solution working in FF3  Safari and IE6  with single and multiline text   ellipsis       white-space  nowrap      overflow  hidden      ellipsis multiline       white-space  normal      lt div class  ellipsis  style  width  100px  border  1px solid black   gt Lorem ipsum dolor sit amet  consectetur adipisicing elit lt  div gt   lt div class  ellipsis multiline  style  width  100px  height  40px  border  1px solid black  margin-bottom  100px  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit lt  div gt    lt script type  text javascript  src   js jquery ellipsis js  gt  lt  script gt   lt script type  text javascript  gt      ellipsis   ellipsis     lt  script gt    jquery ellipsis js   function            fn ellipsis   function                 return this each function                         var el     this                if el css  overflow       hidden                                 var text   el html                    var multiline   el hasClass  multiline                    var t     this cloneNode true                        hide                        css  position    absolute                        css  overflow    visible                        width multiline   el width      auto                        height multiline    auto    el height                                           el after t                    function height     return t height    gt  el height                       function width     return t width    gt  el width                        var func   multiline   height   width                   while  text length  gt  0  amp  amp  func                                          text   text substr 0  text length - 1                       t html text                                              el html t html                     t remove                                        jQuery

User · Answer

I was a bit surprised by the behavior of the css though    var cssEllipsis         width    100    display    inline-block     vertical-align    middle    white-space    nowrap     overflow    hidden    text-overflow    ellipsis        Unless I provided the width to the control to which i needed to bind the ellipsis didn t suppost my cause  Is width a must property to be added     Please put your thoughts

User · Answer

DO THE ELLIPSIS USING ONLY CSS   lt html gt   lt head gt   lt style type  text css  gt   ellipsisdiv       width 200px      white-space  nowrap        overflow  hidden        text-overflow  ellipsis         lt  style gt   lt  head gt   lt body gt   lt div id  ellipsisdiv  gt  This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width   lt  div gt   lt  body gt   lt  html gt     This code works on most current browsers  If you experience any problem with Opera and IE  which probably you won t   add these in the style   -o-text-overflow  ellipsis    -ms-text-overflow  ellipsis      This feature is part of CSS3  Its complete syntax is   text-overflow  clip ellipsis string

[javascript] Insert ellipsis (...) into HTML tag if content too wide

Examples related to javascript

Examples related to html

Examples related to ellipsis

Examples related to elasticlayout