<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>循环多个多行文本溢出省略号击展开收缩(整理)</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="main"></div>
<script>
var arrry = [{
txt: '世界上，每一个人都有个想要寻找的人，这个人，错过了，就再也找不回来。如果爱上，就不要轻易放过机会。莽撞，可能使你后悔一阵子；怯懦，却可能使你一辈子后悔！',
},
{
txt: '世界上，每一个人都有个想要寻找的人，这个人，错过了，就再也找不回来。如果爱上，就不要轻易放过机会。莽撞，可能使你后悔一阵子；怯懦，却可能使你一辈子后悔！',
},
]
var str = '';
$.each(arrry, function(i, v) {
str += '<div class="content content' + i + '" data-index=' + i + ' data-txt=' + v.txt + '>';
if (v.txt.length > 17) {
str += '<span>' + v.txt + '</span>' +
'<a class="a' + i + '" style="color: orange;">查看更多11↓</a>';
} else {
str += '<span>' + v.txt.slice(0, 17) + '</span>' +
'<a class="a' + i + '" style="color: orange;">收起↑</a>';
}
str += '</div>';
});
$('#main').html('');
$('#main').html(str);
$("#main").on('click', '.content', function() {
var index = $(this).attr('data-index');
var txt = $(this).attr('data-txt');
var html = $(this).find(".a" + index).html();
if (html == '查看更多11↓') {
var tempt = $(this).find("span").html();
$(this).find(".a" + index).prev("span").html(tempt.slice(0, 17) + "...");
$(this).find(".a" + index).html('收起↑');
} else {
var tempt = $(this).find("span").html();
$(this).find(".a" + index).prev("span").html(txt);
$(this).find(".a" + index).html('查看更多11↓');
}
});
</script>
</body>
</html>
