当文本内容字数过多时，用户控制文本内容的展示、收起 。恰巧在项目中遇见，因此就有了这个功能的简单实现
一、超出文本只显示省略号
HTML代码：
<div id="text">这里就是一个标签，里面的内容全是乱写的，也不知道怎么写</div>
CSS代码：
//一行文本超出宽度显示省略号#text{width: 50px; /* 容器宽度 */white-space: nowrap; /* 文本不换行 */overflow: hidden; /* 内容会被修剪，并且超过设置宽度的内容是不可见的 */text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/}//超出2行文本显示省略号//width: 280rpx; //自己定宽度//white-space: nowrap; //需要注释掉overflow: hidden; //超出隐藏text-overflow: ellipsis; //文本超出，用ellipsis省略号//显示多行display: -webkit-box;/* 弹性盒模型 */-webkit-box-orient: vertical;/* 元素垂直居中*/-webkit-line-clamp: 2;/* 文字显示的行数*/
white-space 属性：请参考 点击这里
overflow 属性：请参考 点击这里
text-overflow 属性：请参考 点击这里
二、内容 展开全部、收起
HTML代码：
<div><p id="content">这个时间里的小草是最硕大最柔软的新床，诱惑着我们把自己的身躯无比舒坦地交给她们，没有了焦虑，没有了烦恼，在青草的簇拥下，做一个最轻松的美梦。</p><p id="openBtn">展开全部</p></div>
JS代码：
<script src="/jquery/2.1.4/jquery.min.js"></script><script>//定义函数 $ 根据元素id获得页面元素,提高效率function $(id){return document.getElementById(id);}// 立即执行函数，判断文本长度是否过长(function(){var conText = $('content').innerTextif(conText.length >= 20){$('content').style.cssText = "width: 400px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"}})()//点击事件，控制内容显示、收起$('openBtn').onclick=function(){let text = $('openBtn').innerText;if(text == '展开全部'){$('content').style.cssText = "color:chartreuse";$('openBtn').innerHTML = '收起'}if(text == '收起'){$('content').style.cssText = "width: 400px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";$('openBtn').innerHTML = '展开全部'}}</script>
OK！！以上就是一些简单的实现。
