当文本内容字数过多时,用户控制文本内容的展示、收起 。恰巧在项目中遇见,因此就有了这个功能的简单实现
一、超出文本只显示省略号
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!!以上就是一些简单的实现。