学习之余，大家也不要忘记放松呀！来一起欣赏一下我昨天新拍的照片吧！你们觉得哪张最好看呢？哈哈哈哈哈哈哈哈
让我展示给大家看：
希望这些照片能给大家带来欢乐和放松，让我们一起分享快乐的时刻！哈哈哈哈哈哈哈哈
好啦，正式开始！！！
在我们日常开发业务中，我们通常会遇到产品提出的一个需求，比如：产品给你说，这段文字我要求显示7个字，多余的用省略号代替，或者这段文字我要求只能展示4行，多余的用省略号代替！！！ 那这时候我们可能会想，产品怎么事这么多，这个需求是我的底线！！！我坚决不会做的！！！紧接着就会屁颠屁颠的开始调研。。。。
但是实际上呢，这个需求的实现并不难，请大家跟着我的步骤来：
首先我们在展示文字的盒子里（单行文本溢出隐藏），比如说：
<div>你好，我是进阶的鱼，我很高兴认识你！！！</div>
首先我们需要规定这个盒子的宽度，让其宽度只能展示7个字，然后再添加如下样式，就实现了：
display: block;
white-space: nowrap;
overflow: hidden;
/*用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。*/
text-overflow: ellipsis;
之后我们再看看多行文本溢出隐藏,要注意的是，我们同时也要规定好宽度哈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动条隐藏并实现滚动</title>
<style>
.main {
width: 100px;
/* height: 100px; */
background-color: pink;
/* overflow: auto; */
overflow: hidden;
text-overflow: ellipsis; /*溢出的文本用省略号代替*/
display: -webkit-box; /*对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 6; /*6表示行数 不能*/
}
</style>
</head>
<body>
<div class="main">
大家好，我是进阶的鱼。我希望能够将我的技能和经验应用到新的挑战中，并于志同道合的人共同成长。如果你对我的工作和经历感兴趣，或者有任何合作机会，请随时与我联系。
</div>
</body>
<script>
</script>
</html>
然后，我们就会看到这样一个效果：
好啦,产品的需求已经完美实现了，但是这时，他又提出了新的需求，MMP的，他要求我们点击的时候还要继续显示出全文。。。
这个时候，我们一定要忍住，不就加两行代码嘛，我加！！！！
我们给对应的div盒子绑定好点击事件click,如：
<div class="main" onclick="handleClick()">
大家好，我是进阶的鱼。我希望能够将我的技能和经验应用到新的挑战中，并于志同道合的人共同成长。如果你对我的工作和经历感兴趣，或者有任何合作机会，请随时与我联系。
</div>
之后再加入新的class,如：
.main {
width: 100px;
/* height: 100px; */
background-color: pink;
/* overflow: auto; */
overflow: hidden;
text-overflow: ellipsis; /*溢出的文本用省略号代替*/
display: -webkit-box; /*对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 6; /*2表示行数 不能*/
}
.main2 {
width: 100px;
background-color: pink;
}
最后再加入点击事件代码：
const handleClick = () => {
var divElement = document.getElementsByClassName("main")[0] || document.getElementsByClassName("main2")[0];
if(divElement.classList.contains("main")) {
divElement.classList.remove("main")
divElement.classList.add("main2")
} else {
divElement.classList.remove("main2")
divElement.classList.add("main")
}
}
单行的点击显示更如上方案一样！！！
最后问题解决了，看看产品还有什么要说的！！！哈哈哈哈哈哈
补充一点，本文是基于原生的js，如果是react或者vue的话，解决思路大致也一样，相信聪明的你们一定会触类旁通，举一反三的！！！！
还有大家觉得开头的照片到底哪张好看呢😭😭😭😭😭😭
