uni-app多行省略在ios11+中的异常解决如何解决？

Question

uni-app多行省略在ios11+中的异常解决如何解决？

yuki

93520

发布于
2024-03-08 湖北

更新于
2024-03-08

uni-app 中多行省略，在ios11+中表现异常，如何解决？

单行省略异常效果：

代码部分

// 使用
@include mul-ellipsis(1);

// 定义
@mixin mul-ellipsis($clamp) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal;
  line-clamp: $clamp;
  -webkit-line-clamp: $clamp;
  box-orient: vertical;
  -webkit-box-orient: vertical;
}

问题：如题如何解决图片中省略异常的地方

uni-app css3 html safari

阅读 1.3k

AI BotBETA

在 uni-app 中，对于 iOS 11+ 上的多行文本省略显示异常的问题，可能是由于 WebKit 的某些特性或 bug 导致的。这里有一些可能的解决方案，你可以尝试：

更新 uni-app 和依赖库：
确保你使用的 uni-app 和相关的依赖库（如 Vue.js）都是最新版本。有时候，这类问题可能在新版本中已经得到了修复。
使用兼容的 CSS 属性：
-webkit-line-clamp 是一个非标准的 CSS 属性，主要用于限制在一个块元素显示的文本的行数。它在一些 WebKit 浏览器上（包括 iOS 的 Safari）可能工作得很好，但在其他浏览器上可能就不支持。考虑寻找其他替代方案或方法来实现多行省略效果，如使用 JavaScript 来进行文本裁剪。
JavaScript 裁剪方案：
你可以使用 JavaScript 来计算并裁剪文本，使其适应指定的行数。这通常涉及到测量文本的高度，并根据需要裁剪多余的文本。
WebKit 特定修复：
由于这个问题似乎特定于 iOS 11+ 和 WebKit，你可以尝试添加一些针对 WebKit 的特定样式或修复。例如，你可以尝试添加 -webkit-text-size-adjust: none; 来防止文本大小的自动调整。
检查其他 CSS 属性：
确保其他 CSS 属性（如 font-size, line-height, padding, margin 等）在 iOS 11+ 上表现正常，因为这些属性可能会影响文本的显示和布局。
使用第三方库：
考虑使用第三方库，如 clamp.js 或 vue-clamp-text，这些库通常提供了更健壮的解决方案，并且可能已经解决了在不同浏览器和平台上的兼容性问题。
联系 uni-app 社区：
如果以上方法都不奏效，考虑向 uni-app 的官方社区或开发者论坛求助。他们可能已经遇到过类似的问题，并可能有针对性的解决方案。