H5W3
当前位置:H5W3 > 问答 > 正文

多余文字查看更多 怎么实现 移动端

多余文字查看更多 怎么实现 移动端
求思路

通过js处理截取文字,怎么去判断 文字截取到哪

回答

最大的问题是如何让最后一行的文字和「查看更多」刚好排满一整行。
一个思路:

  1. 先把元素里的文字清空,留下「…」和「查看更多」
  2. 遍历需要裁剪的文字,把文字一个个的放进元素
  3. 检查元素高度,当元素高度变化了,就说明换行了
  4. 当第三次换行,说明已经到第四行了,这时就删除最后一个文字,停止遍历

配合 text-align: justify,就留下了刚好三行的文字。
这个方法可以适配不同的字型,但是性能会比较差


楼上的 -webkit-line-clamp: 3 是标准做法,但是不适配最后有「查看更多」的情况,而且兼容性稍差。
倒是可以设置 text-overflow: '... 查看更多',这样文字倒是完美裁剪了,但是样式和可点击区域怎么搞没想到

给两个思路
1.后端直接返回所有文本,前端截取展示部分,点击按钮显示所有
2.每次后端返回部分文本,点击按钮调接口拿所有数据并展示

ps:各有优劣,根据自身项目情况选择就行

一种是可以利用css一个类名添加多行文本超出样式,点击后把改类名去掉
`
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
`,
另外可以类似百度搜索结果那样,用js处理文字+… 点击查看全部后再替换原来的文本多余文字查看更多 怎么实现 移动端

未经允许不得转载:H5W3 » 多余文字查看更多 怎么实现 移动端

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址