javascript - 关于一个从来没做过的css 效果 两行溢出 自动加展开的问题，想请教下大家？
-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;
请问超出两行溢出 加个展开的下箭头，这个我要怎么判断是否超出两行溢出了，还有这个省略号怎么取消 用展开的下箭头代替呢？请问有没有人做过类似的需求？
共有2个答案
此刻就必须要祭出本站大佬的文章了:CSS 实现多行文本“展开收起”
开头就是你的痛点:
实现这一类布局和交互难点主要有以下几点:
- 位于多行文本右下角的“展开收起”按钮
- “展开”和“收起”两种状态的切换
- 当文本不超过指定行数时，不显示“展开收起”按钮
这个问题涉及到 CSS 的复杂样式，其中涉及到对文本溢出进行处理的技巧。
首先，-webkit-line-clamp: 2; 这行 CSS 规则的作用是限制在一个块元素显示的文本的换行显示，最多显示两行。
display: -webkit-box; 和 -webkit-box-orient: vertical; 这两行是为了让元素具有弹性，可以像盒子一样包裹内容。
overflow: hidden; 是用来处理内容溢出的，当内容超过元素的宽度或高度时，会隐藏超出的部分。
要判断是否超出两行溢出，可以通过 JavaScript 来实现。可以通过获取元素的实际高度和预期高度来进行比较。如果实际高度大于预期高度，那么就意味着已经溢出了。
至于用展开的下箭头来代替省略号，可能需要通过一些 CSS 和 JavaScript 的结合来实现。可以通过监听滚动事件，当滚动到接近底部时，通过 JavaScript 动态地改变 CSS 属性，将省略号（...）替换为下箭头（↓）。
具体的实现可能需要考虑很多细节，例如箭头的大小、位置、颜色等等。需要花费一些时间进行调试和优化才能得到满意的结果。
-
我这里有个49%宽度 高度为200px的容器，里面是一个多张图片的轮播图，这里的轮播图片，我想让它宽度百分之百适配容易宽度，高度则自适应，我因为一些bug问题，不能使用小程序的mode="widthFix" 请问除了用js，我能怎么写？
-
问题背景：我现在想做一个关于文本溢出，显示展开按钮，文本如果没溢出，就不显示展开按钮 例子：如果文本超出两行，显示按钮，小于等于两行，那么就不显示按钮。 但是不知道如何判断文本是否会超出两行？
-
let arr1 = [333,555,222] let arr2 = [100,200,300] arr1 和 arr2 中的每项是对应关系， 请问如何比较 arr1中 最大值的那项，必须对应arr2中的最小值 意思就是说，按正常情况，arr1和arr2的对应关系应为： let arr1 = [333,555,222] let arr2 = [200,100,300] 请问如何去写判断？实际场景
-
找软件公司开发的游戏项目快到测试阶段了，第一次乙方合作，有点担心质量问题，在想要不要找第三方来做个项目检测，但是第三方检测就靠谱吗？
-
我发现我的微信小程序首页，会偶尔出现页面不停地闪烁刷新的问题，它不是必现的问题，可能好几天偶尔出现一次，我排查了代码，就算是直接用定时器每一秒执行 this.onload() 也只是页面数据在重载， 我遇到的问题，是整个页面都在刷新，就像网页被人不停的在按f5一样，不知道为什么会导致这种问题出现？
-
假设我现在有5屏的页面，当我鼠标滚动的时候加载上一页下一页，当页面出现的时候，有进场动画和离场动画。我现在写的是监听鼠标wheel事件，判断滚动方向，然后去找对应的元素一个一个添加动画，进场动画是从底部到中间，离场动画是从顶部到中间。然后我感觉写的好麻烦啊、请问有类似的demo或者文档可以参考的吗？