如果文本长度超过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

编辑：我根据你要求更新我的职务。可以尝试下面的脚本。希望这会帮助你。

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