How to replace extra texts with (…) using javascript

Question

i have a text filed where users write something and i get the text with javascript of that text box and show it in a paragraph.I have text limit for the paragraph like 50 chrac. If users write more than 50 chrac i wanna show (...) after 45 chrac. is it possible using javascript?

Like this is the paragraph what user wrote and its more than 50 chrac.

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.

i wanna show this as

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt (.....)

is it possible using javascript?

Answer 1

$('textarea').on('keyup', function() {
    var v = this.value.length > 50 ? this.value.substr(0,45) + '(...)' : this.value;
    $('#result').text( v );
});

FIDDLE

Here's how you'd cut it off at the last word:

FIDDLE

Answer 2

The following will append (...) after 45 characters of the text if it is more than 50 characters long, for each element in the set.

elem = $('p');

elem.each(function(){
   curTxt = $(this).text();
    $(this).text(curTxt.length > 50 ? curTxt.substring(0,45)+'...' : curTxt);
});

JSFiddle

Answer 3

Yes, it's posible. You can short your string using the next function:

var str = 'Lorem ipsum...'; var shortedStr = str.substr(0,50) + '(...)';

Anyway, you could do it automatically by CSS. You already have an answer with this subject here:

Truncating long strings with CSS: feasible yet?

Answer 4

You can set a global solution like that:

<p class="truncate">
    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.
</p>

you can truncate every paragraph with truncate class:

$('.truncate').each(function (el, index) {
    $el = $(el);
    $el.text($el.text().substr(0, 50) +' (...)');
});

Answer 5

This can also be done in CSS for a much nicer result.

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

This way, the text will always be cut off as near as possible to the end of the element, no matter what its contents. This looks a lot nicer than seemingly random cut-offs.

Answer 6

Check this jsfiddle.net domo here

jQuery

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

HTML

<div class="comment more">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>