返回顶部
首页 > 资讯 > 移动开发 >前端vue/uniapp —— 兼容ios与安卓问题
  • 696
分享到

前端vue/uniapp —— 兼容ios与安卓问题

前端vue.jsuni-appiosandroid 2023-09-08 15:09:30 696人浏览 安东尼
摘要

1.flex布局中justify-content/align-items: end;iOS不生效问题 // 把end 改为 flex-endjustify-content: flex-end;alig

1.flex布局中justify-content/align-items: end;iOS不生效问题

// 把end 改为 flex-endjustify-content: flex-end;align-items: flex-end;

2.文字溢出显示省略号——富文本在ios真机不生效

CSS样式无效:安卓可,ios不可

.multiWrap {  Word-wrap: break-word;   display:-WEBkit-box;   overflow:hidden;   text-overflow:ellipsis;   word-wrap:break-word;   -webkit-line-clamp:2;   -webkit-box-orient:vertical;}

② 富文本外层包裹:安卓可,ios不可

<div style='display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;line-clamp: 3;overflow: hidden;height: 120rpx;'>{{富文本内容}}</div>

③ 提取富文本文字后加css样式:安卓可,ios可,不完美的解决办法

// 提取富文本文字+长度截取function truncatehtml (htmlText, limit, indicator) {  var tempDiv = document.createElement('div')  tempDiv.innerHTML = htmlText  var text = tempDiv.textContent || tempDiv.innerText || ''  if (text.length > limit) {    text = text.substring(0, limit) + (indicator || '...')  }  return text}.multiWrap {  word-wrap: break-word;   display:-webkit-box;   overflow:hidden;   text-overflow:ellipsis;   word-wrap:break-word;   -webkit-line-clamp:2;   -webkit-box-orient:vertical;}

来源地址:https://blog.csdn.net/qq_42905523/article/details/130400293

--结束END--

本文标题: 前端vue/uniapp —— 兼容ios与安卓问题

本文链接: https://lsjlt.com/news/400191.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作