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

最新推荐文章于 2024-09-10 09:38:26 发布

像山里的风

最新推荐文章于 2024-09-10 09:38:26 发布

阅读量2.7k

点赞数

文章标签：前端 vue.js uni-app ios android

本文链接：https://blog.csdn.net/qq_42905523/article/details/130400293

版权

文章讨论了在使用flex布局时，justify-content和align-items:end在iOS上可能不生效的问题，以及富文本在iOS设备上实现文字溢出显示省略号的两种方法，包括CSS样式和富文本包裹方式，但都存在兼容性问题。提供了一个不完美的解决方案，即通过JavaScript提取并截取富文本内容来模拟省略号效果。

摘要由CSDN通过智能技术生成

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可，不完美的解决办法


// 提取富文本文字+长度截取
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;
}