原生js实现多行文字展开收缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg图标</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1,user-scalable=no" />
</head>
<body >
<style>
.full-content {
position: relative;
font-size: 14px;
line-height: 1.5;
word-break: break-all;
padding: 5px;
text-align: justify;
overflow: hidden;
margin: 5px;
}
.fold {
max-height: 4em;
}
.expand {
max-height: 1000px;
}
.full-content .fold_icon {
display: inline-block;
width: 15px;
height: 12px;
}
.full-content .expand_icon {
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 21px;
background-image: -webkit-linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff 60%);
background-image: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), #fff 60%);
background-image: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, #fff 60%);
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff 60%)
}
.fold_icon:after {
display: block;
content: "";
width: 6px;
height: 6px;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
-webkit-transform: translate(5px, 5px) rotate(45deg);
transform: translate(5px, 5px) rotate(45deg);
}
.expand_icon:after {
display: block;
content: "";
position: absolute;
right: 5px;
top: 50%;
width: 6px;
height: 6px;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
-webkit-transform: translate(0, -7px) rotate(-135deg);
transform: translate(0, -7px) rotate(-135deg);
}
</style>
<div id="test" class="full-content fold" style=" width:350px; border: solid red 1px;">
新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中，预计9月5日已经开通上线。
</div>
<div class="full-content fold" style=" width:350px; border: solid red 1px;">
新职业移动端正在积极构建中，预计9月5日已经开通上线。新职业移动端正在积极构建中...
</div>
<script>
(function () {
var m = document.getElementById('test');
// 判断是否显示收起
if (m.clientHeight < m.scrollHeight) {
// <span class="fold_icon" style="display:none"></span>
// <span class="expand_icon"></span>
var fold_icon = document.createElement('span');
fold_icon.className = "fold_icon"
var expand_icon = document.createElement('span')
expand_icon.className = "expand_icon"
m.appendChild(fold_icon);
m.appendChild(expand_icon);
// add event
expand_icon.addEventListener('click', function (e) {
m.className = "full-content fold expand";
expand_icon.style.display = "none";
});
fold_icon.addEventListener('click', function (e) {
m.className = "full-content fold";
expand_icon.style.display = "block";
})
}
})();
</script>
</body>
</html>
