<!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>
原生js实现多行文字展开收缩
原文地址：https://www.cnblogs.com/jiaxd/p/9680719.html