如果文本长于 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>