Wrap text if it is longer than max_characters

Question

I have now a text wrapper, this works only on first div with same name, but my code creates automatically this div based on new messages.

How can I make it work with all other divs with the same name?

$(document).ready(function(){
    var content=$(".reply_message").html();
    var description=content.substr(0,100); //first 140 characters allowed to show
    $(".reply_message").html(description+"...");

    $("#show").on("click",function(){
        var more=$("#show").html();
        if(more=="Show more")
        {
            $("#show").html("Show less");
            $(".reply_message").html(content);
        }
        else
        {
            $("#show").html("Show more");
            $(".reply_message").html(description+"...");
        }
    });
});

http://jsfiddle.net/arz9suL0/

MH2K9 · Accepted Answer · 2014-12-04T17:50:53.447

EDIT : I updated my post according to you demand. Can try below scripts. Hope this will help you.

<div id="text">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
    var myVal = '',
        more = '<a href="javascript:void(0);" class="more">More</a>',
        less = '<a href="javascript:void(0);" class="more">Less</a>';
    $(document).ready(function(){
        myVal = $('#text').text();
        if(myVal.length > 100){
            $('#text').html(myVal.substring(0, 100) + more);
        }
    });

    $(document).on('click', '.more', function(){
        ($(this).text() == 'More') ? $('#text').html(myVal + less) : $('#text').html(myVal.substring(0, 100) + more);
    });

</script>

Nice, but i want to count the length of the val inside the div and if its bigger than 100 i want that it wraps it automaticly and makes a read more link — John Smith, Dec 04 '14 at 17:00

score -1 · Answer 2 · answered Dec 04 '14 at 16:28

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="truncate"> Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text</div>

Duplicate question [HERE](http://stackoverflow.com/questions/2248742/jquery-text-truncation-read-more-style). Why the downvote ? Clipped the text didn't it — Billy, Dec 04 '14 at 16:37

Wrap text if it is longer than max_characters

2 Answers2