当前位置: 首页 > 知识库问答 >
问题:

javascript - 关于一个从来没做过的css 效果 两行溢出 自动加展开的问题,想请教下大家?

万俟鸿波
2023-12-08

image.png

-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;

image.png

请问超出两行溢出 加个展开的下箭头,这个我要怎么判断是否超出两行溢出了,还有这个省略号怎么取消 用展开的下箭头代替呢?请问有没有人做过类似的需求?

共有2个答案

轩辕经赋
2023-12-08

此刻就必须要祭出本站大佬的文章了:CSS 实现多行文本“展开收起”

开头就是你的痛点:
实现这一类布局和交互难点主要有以下几点:

  • 位于多行文本右下角的“展开收起”按钮
  • “展开”和“收起”两种状态的切换
  • 当文本不超过指定行数时,不显示“展开收起”按钮
柴浩大
2023-12-08

这个问题涉及到 CSS 的复杂样式,其中涉及到对文本溢出进行处理的技巧。

首先,-webkit-line-clamp: 2; 这行 CSS 规则的作用是限制在一个块元素显示的文本的换行显示,最多显示两行。

display: -webkit-box;-webkit-box-orient: vertical; 这两行是为了让元素具有弹性,可以像盒子一样包裹内容。

overflow: hidden; 是用来处理内容溢出的,当内容超过元素的宽度或高度时,会隐藏超出的部分。

要判断是否超出两行溢出,可以通过 JavaScript 来实现。可以通过获取元素的实际高度和预期高度来进行比较。如果实际高度大于预期高度,那么就意味着已经溢出了。

至于用展开的下箭头来代替省略号,可能需要通过一些 CSS 和 JavaScript 的结合来实现。可以通过监听滚动事件,当滚动到接近底部时,通过 JavaScript 动态地改变 CSS 属性,将省略号(...)替换为下箭头(↓)。

具体的实现可能需要考虑很多细节,例如箭头的大小、位置、颜色等等。需要花费一些时间进行调试和优化才能得到满意的结果。

 类似资料:
  • 问题背景:我现在想做一个关于文本溢出,显示展开按钮,文本如果没溢出,就不显示展开按钮 例子:如果文本超出两行,显示按钮,小于等于两行,那么就不显示按钮。 但是不知道如何判断文本是否会超出两行?

  • 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] 请问如何去写判断?实际场景

  • 找软件公司开发的游戏项目快到测试阶段了,第一次乙方合作,有点担心质量问题,在想要不要找第三方来做个项目检测,但是第三方检测就靠谱吗?

  • 假设我现在有5屏的页面,当我鼠标滚动的时候加载上一页下一页,当页面出现的时候,有进场动画和离场动画。我现在写的是监听鼠标wheel事件,判断滚动方向,然后去找对应的元素一个一个添加动画,进场动画是从底部到中间,离场动画是从顶部到中间。然后我感觉写的好麻烦啊、请问有类似的demo或者文档可以参考的吗?

  • 我想等submit_order_info 这个接口调用后,再执行that.get_check_submit_order() 这个接口的调用, 请问如何去修改?

  • 我想做一个跟https://geojson.io/一样的可交互的地球,而且还不卡,请问应该用什么方案实现?