前端如何只显示最后三行?

teli · 2024-8-30 11:26:14 · 61 次点击
文本内容是生成的,很慢,大概 1-2 分钟
所以需要作一个 loading 页面,展示出内容正在生成。这个页面也会放置其它的内容,广告、友情提示、推荐
目前的设想,是前端向后端轮询,展示最后三行,也就是最新生成的文本
轮询好说,但怎么展示最后三行呢?
或者大家对于这个 loading 页面的设计,有没有别的好建议?
举报· 61 次点击
登录 注册 站外分享
7 条回复  
Meursau1T 小成 2024-8-30 12:04:03
有一种需求是文本收起状态只展示两行,点击展开按钮后再全部展示,使用-webkit-line-clamp 属性的,你可以瞅瞅,用那个方法可以限制行数,然后你再给整个文本区域定位改一下,把最后一行定在最下面,这样就是最后 N 行了
zsh2517 小成 2024-8-30 12:59:12
后端返回足够长(保证宽屏也能有三四行)的数据,然后前端底部对齐,预先测量好高度,只露出底部三行高度的文字?

高度可以开发的时候测量,或者创建一个样式相同,宽度相同的隐藏的容器,js 往里面加数据直到恰好三行。然后保留相同高度
Mikawa 小成 2024-8-30 13:04:09
我的想法和 2L 类似,不过如果是纯文字,可以用行高来处理高度
wunonglin 小成 2024-8-30 13:05:29
限制字数 + 行结合。

当限制最大字数 200 个字后,前端就可以根据页面计算需要显示多少行,这种场景往往页面宽度会限制最大宽度的,类似 fshex ,所以还是比较好实现的
vacuitym 小成 2024-8-30 13:26:50
歪个楼,为什么用轮询不用 websocket
nitmali 小成 2024-8-30 13:30:22
最简单的只留三行高度...
gugogo 小成 2024-8-30 13:35:23
@vacuitym 应该用的是 SSE (Serfer-sent events)
返回顶部