CSS文本超出宽度显示省略号，点击展开全部则显示全部，收起

当文本内容字数过多时，用户控制文本内容的展示、收起 。恰巧在项目中遇见，因此就有了这个功能的简单实现

一、超出文本只显示省略号
HTML代码：

    这里就是一个标签，里面的内容全是乱写的，也不知道怎么写

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代码：

这个时间里的小草是最硕大最柔软的新床，诱惑着我们把自己的身躯无比舒坦地交给她们，没有了焦虑，没有了烦恼，在青草的簇拥下，做一个最轻松的美梦。
展开全部

JS代码：

OK！！以上就是一些简单的实现。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！