0


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

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

// 把end 改为 flex-end
justify-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可,不完美的解决办法

// 提取富文本文字+长度截取functiontruncateHTML(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;}
标签: 前端 vue.js uni-app

本文转载自: https://blog.csdn.net/qq_42905523/article/details/130400293
版权归原作者 像山里的风 所有, 如有侵权,请联系我们删除。

“前端vue/uniapp —— 兼容ios与安卓问题”的评论:

还没有评论