修改文本长度OnClick
mic*_*ltm 3 html javascript jquery
我有一个长度有限的段落.达到限制时,在缩短文本的末尾添加" + "符号.
我想点击这个" + ",这样段落的其余部分就会出现.然后通过单击该段落,文本应再次缩短.
例:
到现在为止,我可以设法限制文本大小并在末尾添加"+".
码:
var myDiv = $('#trim');
var myDivlength = myDiv.text().length;
if(myDivlength>10){
myDiv.text(myDiv.text().substring(0,10));
myDiv.append(" ..." + '+');
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<p id="trim">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>您可以使用CSS实现所有必需的行为no-wrap,text-overflow并:after为该+字符使用伪元素.然后,您只需要在JS click处理程序中切换类.试试这个:
$('#trim').click(function() {
$(this).toggleClass('full');
});#trim {
text-overflow: ellipsis;
width: 400px;
height: 30px;
overflow: hidden;
white-space: nowrap;
position: relative;
display: inline-block;
padding-right: 20px;
}
#trim:after {
content: '+';
right: 0;
position: absolute;
}
#trim.full {
width: auto;
height: auto;
white-space: normal;
}
#trim.full:after {
display: none;
}<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p id="trim">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>| 归档时间： |
|
| 查看次数： |
140 次 |
| 最近记录： |