4 Replies - 4598 Views - Last Post: 26 October 2014 - 08:11 PM

#1 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,991
  • Joined: 30-April 10

Limit text and add ellipsis global function

Post icon  Posted 04 March 2014 - 11:39 PM

The following snippet is for limiting a string and adding an ellipsis. It is added to the window so it is in the global window scope.

(function (window) {
    window.limitText = function(text, limit){
        var words = text.split(' ');
        var wordsStart = words.length;
        words.splice(limit, words.length - 1);
        if (wordsStart > limit){
            return words.join(' ') + " ...";
        }else{
            return words.join(' ');
        }
    };
})(window);


Usage:

window.limitText("This is my test string.", 2) or limitText("This is my other test string.", 2) will return "This is ..."

This post has been edited by laytonsdad: 26 October 2014 - 05:36 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Limit text and add ellipsis global function

#2 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,991
  • Joined: 30-April 10

Re: Limit text and add ellipsis global function

Posted 14 March 2014 - 04:14 PM

It is not necessary to add this to the window object So I wanted to add this version also.

var limitText = function (text, limit) {
    var words = text.split(' '),
    wordsStart = words.length,
    newWords = words.slice(0, limit);
    
    if (wordsStart > limit) {
        return newWords.join(' ') + " ...";
    } else {
        return newWords.join(' ');
    }
};


console.log(limitText("Hello World, I'm peter.", 2));
// Logs "Hello world, ..."

This post has been edited by laytonsdad: 15 March 2014 - 12:26 PM

Was This Post Helpful? 1
  • +
  • -

#3 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Limit text and add ellipsis global function

Posted 26 October 2014 - 04:03 PM

@laytonsdad:

That last post was very interesting to me. I played with it to create MULTIPLE ellipse displays.
Pretty easy to change sizes and colors within the display as well as add other elements
if you don't plan on doing much additional processing.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> Multiple Ellipse Displays </title>
<style type="text/css">
 .msgSH { border:1px solid red; width:175px; background-color:#fff000; }
</style>

</head>
<body>
<h2>Ellipse Displays</h2>
<div id="msg0" sh='show' class="msgSH" onclick="toggleLimit(this.id,0)">
 Sample display #0 without ellipse ending.
</div><p>
<div id="msg1" sh='show' class="msgSH" onclick="toggleLimit(this.id,1)">
 Sample display #1 without ellipse ending and additional text.
</div><p>
<div id="msg2" sh='show' class="msgSH" onclick="toggleLimit(this.id,2)">
 Sample display #2 without ellipse ending.
 <p>Multiple lines can be shown.
 <p>Could also include links <a href="http://www.nova.edu/~rumsey">Homepage</a>
</div><p>

<script type="text/javascript">

var limitText = function (text, limit) {
    var words = text.split(' '),
    wordsStart = words.length,
    newWords = words.slice(0, limit);
    
    if (wordsStart > limit) { return newWords.join(' ') + " ..."; }
                       else { return newWords.join(' '); }
};

var txtLimit = [];  // Holds initial contents of displays incase JS is enabled

function toggleLimit(IDS,ndx) {
  var sh = document.getElementById(IDS).sh;
  var txt = txtLimit[ndx];  
  if (sh == 'hide') {
    document.getElementById(IDS).sh = 'show';
    document.getElementById(IDS).innerHTML = limitText(txt,1000);  // txt.length);
  } else {
    document.getElementById(IDS).sh = 'hide';
    document.getElementById(IDS).innerHTML = limitText(txt,4);
  }
}

window.onload = function() {
  var sel = document.getElementsByClassName('msgSH');
  for (var i=0; i<sel.length; i++) {
    txtLimit.push(document.getElementById(sel[i].id).innerHTML);
    toggleLimit(sel[i].id,i);
  }
}

</script>

</body>
</html>




I then went on to create a multiple column drop display with a bit more modifications to your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> Ellipse Horizontal Displays </title>
<style type="text/css">
 .msgSH { border:1px solid black; width:175px; background-color:#ffffdd; }
 #msg li { list-style-type:none; display:inline-block; vertical-align:top; }
</style>

</head>
<body>
<h2>Ellipse Horizontal Displays</h2>
<ul id="msg">
<li id="msg0" sh='show' class="msgSH" onclick="toggleLimit(this.id,0)">
 Sample display #0 without ellipse ending.
</li>
<li id="msg1" sh='show' class="msgSH" onclick="toggleLimit(this.id,1)">
 Sample display #1 without ellipse ending and additional text.
</li>
<li id="msg2" sh='show' class="msgSH" onclick="toggleLimit(this.id,2)">
 Sample display #2 without ellipse ending.
 <p>Multiple lines can be shown.
 <p>Could also include links <a href="http://www.nova.edu/~rumsey">Homepage</a>
</li>
</ul>

<p>

<script type="text/javascript">

var limitText = function (text, limit) {
    var words = text.split(' '),
    wordsStart = words.length,
    newWords = words.slice(0, limit);
    
    if (wordsStart > limit) { return newWords.join(' ') + " ..."; }
                       else { return newWords.join(' '); }
};

var txtLimit = [];  // Holds initial contents of displays incase JS is enabled

function toggleLimit(IDS,ndx) {
  var sh = document.getElementById(IDS).sh;
  var txt = txtLimit[ndx];  
  if (sh == 'hide') {
    document.getElementById(IDS).sh = 'show';
    document.getElementById(IDS).innerHTML = limitText(txt,1000);  // txt.length);
  } else {
    document.getElementById(IDS).sh = 'hide';
    document.getElementById(IDS).innerHTML = limitText(txt,4);
  }
}

window.onload = function() {
  var sel = document.getElementsByClassName('msgSH');
  for (var i=0; i<sel.length; i++) {
    txtLimit.push(document.getElementById(sel[i].id).innerHTML);
    toggleLimit(sel[i].id,i);
  }
}

</script>

</body>
</html>



Both forms of display seem to degrade well in the case where JS is not enabled.

Thanks for the idea. :)/>
Was This Post Helpful? 1
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,991
  • Joined: 30-April 10

Re: Limit text and add ellipsis global function

Posted 26 October 2014 - 05:35 PM

Thank you JMRKER for adding on to it... great additions.
Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Limit text and add ellipsis global function

Posted 26 October 2014 - 08:11 PM

I maybe going a bit crazy with this, but I've tried to make it more programmer friendly. :)/>

The following code:
1. Can have Vertical and Horizontal displays using <ul> and <li> tags
2. May use Single or Multiple ellipse displays placed as desired using <div> tags
3. No longer uses a required correct index to saved .innerHTML text display.
4. Can have variable number of words shown before ellipse display
5. Allows different widths/colors via use of CSS element changes

As far as tested, still degrades to visible HTML if JS not enabled.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Multiple Ellipse Horiz/Vert Displays </title>

<style type="text/css">
 .msgSH { border:1px solid black; width:175px; background-color:#ffffdd; margin:3px 0px; }
   #msg li { list-style-type:none; }                     /* horiz & vert display */
   #msg li { display:inline-block; vertical-align:top; } /* horiz display only */
</style>

</head>
<body>
<h2>Ellipse Horizontal/Vertical Displays</h2>
<ul id="msg">

<li id="msg0" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
 Sample display #0 without ellipse ending.
</li>

<li id="msg1" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
 Sample display #1 without ellipse ending and additional text.
</li>

<li id="msg2" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
 Sample display #2 without ellipse ending.
 <p>Multiple lines can be shown.
 <p>Could also include links: <a href="http://www.yahoo.com">Yahoo Homepage</a>
</li>

<br>

<li id="msg3" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
 Sample display #3 without ellipse ending.
</li>

<li id="msg4" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
 Sample display #4 without ellipse ending and additional text.
</li>

</ul><p>
<div id="msgDIV" sh='show' ptr='0' class="msgSH" onclick="toggleLimit(this.id)">
 Sample display (#5) of DIV without ellipse ending.
 Multiple lines can be shown including links to
 <a href="http://www.google.com">Google</a>
</div>

<script type="text/javascript">

var limitText = function (text, limit) {
    var words = text.split(' ');
    var newWords = [], str = '';
    if (limit == 0) { newWords = words.slice(0); }  // copy ALL words
               else { newWords = words.slice(0,limit); str = ' ...'; } // limit word copy
    return newWords.join(' ')+str;
};

var txtLimit = [];  // Holds initial contents of displays in case JS is enabled
function toggleLimit(IDS) {
  var sh = document.getElementById(IDS).sh;
  var ndx = document.getElementById(IDS).ptr;
  var txt = txtLimit[ndx];  
  if (sh == 'hide') {
    document.getElementById(IDS).sh = 'show';
    document.getElementById(IDS).innerHTML = limitText(txt,0);  // show ALL words
  } else {
    document.getElementById(IDS).sh = 'hide';
    document.getElementById(IDS).innerHTML = limitText(txt,4);  // limit display to 4 words
  }
}
window.onload = function() {
  var sel = document.getElementsByClassName('msgSH');
  for (var i=0; i<sel.length; i++) {
    txtLimit.push(document.getElementById(sel[i].id).innerHTML);
    sel[i].ptr = i.toString();
    toggleLimit(sel[i].id);
  }
}
</script>

</body>
</html>


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1