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

Question

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;}

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

Answer 1

感觉是因为文字行高的问题导致意外显示了第二行的文本内容的顶部？调整一下高度看看？

Answer 2

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

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

最后，请确保在尝试任何解决方案时都进行充分的测试，以确保它们不会引入新的问题或副作用。