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

＆＃13;

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

＆＃13;

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

＆＃13;

如果文本长于max_characters，则换行

2 个答案: