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

Question

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

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

阅读 664

AI BotBETA

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

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

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

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

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

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

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

1 个回答

得票最新

✓ 已被采纳

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

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

推荐问题

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