Оберните текст, если он длиннее max_characters

Question

У меня теперь текстовая оболочка, это работает только с первым div с тем же именем, но мой код автоматически создает этот div на основе новых сообщений.

Как я могу заставить его работать со всеми другими div с тем же именем?

$(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/

Answer 1

EDIT: Я обновил свой пост в соответствии с требуешь. Можете попробовать сценарии ниже. Надеюсь, что это поможет вам.

<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>

Answer 2

.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>