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

image
求思路

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

阅读 5.2k
3 个回答

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

  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处理文字+... 点击查看全部后再替换原来的文本image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏