Set text limit using jquery

Question

There is some text comprised of 165 characters. I need to show only the first 155 characters, but the last 5 out of the 155 chars should be replaced with "....." (elipses), and the remaining characters should be removed. fiddle

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        var txt= $('div').text();
        for(i=0;i<2;i++){
            alert(txt.charAt(150+ i))
        }
    })
</script>
</head>
<body>
<div style="width:100px">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that
</div>
</body>

Come on @TecHunter, he has a fiddle with things he trying. You have to start learning from somewhere. A -1 on a question with an included fiddle that shows he is trying to learn should get you a -1 yourself. Did you know string functions from day 1? — JClaspill
– JClaspill, Commented May 30, 2013 at 15:54

TecHunter · Accepted Answer · 2015-10-28 19:32:51Z

14

Check out the substring function here, and voilà:

var txt= $('#restrict').text();
if(txt.length > 155)
    $('#result').text(txt.substring(0,150) + '.....');

http://jsfiddle.net/techunter/GRmY2/

edited Oct 28, 2015 at 19:32

answered May 30, 2013 at 15:51

TecHunter

6,1712 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JClaspill Over a year ago

You could remove the rude comment and this would get an upvote.

TecHunter Over a year ago

okay sorry, you are right, I've seen worse questions that's true. I even upvoted your comment as self punishement for being too harsh for this late afternoon :P

Gabe · Accepted Answer · 2013-05-30 15:48:42Z

5

Depending on what browsers you're targeting, you could just use css.

text-overflow: ellipsis

answered May 30, 2013 at 15:48

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

1 Comment

TecHunter Over a year ago

nice but too specific imo :)

Jerry · Accepted Answer · 2013-05-31 16:53:55Z

2

Looks like TecHunter already posted pretty much the same thing, but I was bored and did this.

At 155 chars replaces last 5 characters with "....". Has a textarea input with a character counter that updates as you type.

Html

<div>
    <h2>Input</h2>
    <textarea id="sampleInput">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.     The point of using Lorem Ipsum is that
    </textarea>
</div>
<div>
    <label>Character Count:</label> <span id ="charCounter"></span>
<div>
<h2>Output</h2>
<p style="width:100px" id="sampleOutput"></p>

JS

updateOutput();

$('#sampleInput').keyup(function(e){
   updateOutput();
});

function updateOutput(){
    var sampleInput = $('#sampleInput').val(),
        sampleInputLength = sampleInput.length;

    if(sampleInputLength >= 155) {    
        sampleInput = sampleInput.substr(0,150) + ".....";    
    }

    $('#charCounter').text(sampleInputLength);
    $('#sampleOutput').text(sampleInput);
}

CSS

#sampleInput {
    width: 400px;
    height:100px;    
}

jsfiddle

edited May 31, 2013 at 16:53

answered May 30, 2013 at 16:00

Jerry

1,7854 gold badges22 silver badges41 bronze badges

2 Comments

TecHunter Over a year ago

I +1 for the effort :) and because you are bored

Jerry Over a year ago

@TecHunter If I was really bored, I'd turn this into a plugin.

igorsgm · Accepted Answer · 2022-05-31 01:37:23Z

1

I saw some nice answers, however, some of them are not efficient in other cases, ex: when you copy and paste something. So, I would suggest:

 $(document).on('keyup keypress blur change', '#elementId', function () {
     var maxLength = 100; // number of characters to limit
     imposeMaxLength($(this), maxLength);
 });

 function imposeMaxLength(element, maxLength) {
     if (element.val().length > maxLength) {
         element.val(element.val().substring(0, maxLength));
     }
 }

Using imposeMaxLength as function, you can reuse it in other events.

edited May 31, 2022 at 1:37

answered May 8, 2017 at 20:38

igorsgm

862 silver badges7 bronze badges

Comments

TarangP · Accepted Answer · 2021-03-04 11:41:32Z

0

$(".btn-custom").text(function(index, currentText) {
    if(currentText.length > 60){
        return currentText.substr(0, 20)+" ...";
    }
});

edited Mar 4, 2021 at 11:41

TarangP

2,7385 gold badges24 silver badges42 bronze badges

answered Mar 4, 2021 at 10:49

Chaturvedi Ravi Arvind

12 bronze badges

1 Comment

TarangP Over a year ago

Please add little briefly about the code you written

Collectives™ on Stack Overflow

Set text limit using jquery

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related