uni-app 文本超出两行显示省略号在ios真机无效

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 文本超出两行显示省略号在ios真机无效

操作步骤：

  • 正常css编写

预期结果：

  • 超出两行显示省略号

实际结果：

  • ios一行显示省略号

bug描述：

设置文本超出两行显示省略号在ios真机无效 安卓正常、微信开发者工具模拟器也显示正常

Image


| 项目         | 版本/方式        |
|--------------|-----------------|
| 产品分类     | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows          |
| PC开发环境操作系统版本号 | 22631.4317       |
| 第三方开发者工具版本号 | 1.06.2409140     |
| 基础库版本号   | 3.6.5            |
| 项目创建方式   | CLI              |
| CLI版本号     | 3.0.0            |

Harmonyos Next教程
2 回复

wx官方已回复，iphone的问题


在 uni-app 中处理文本超出两行显示省略号的问题，特别是在 iOS 真机上，确实可能会遇到一些兼容性挑战。这通常与 CSS 的 line-clamp 属性在不同平台上的表现差异有关。为了确保在 iOS 上也能正确显示省略号，你可以尝试使用以下方法，结合 uni-app 的特性和 CSS 样式来实现。

以下是一个在 uni-app 中处理文本超出两行显示省略号的示例代码：

  1. 在页面的 .vue 文件中，使用内联样式或 <style> 标签定义样式：
<template>
  <view class="container">
    <text class="ellipsis-text">{{ text }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段很长的文本，用于测试文本超出两行时是否显示省略号。'
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 20px;
}

.ellipsis-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em; /* 根据实际字体大小调整 */
  max-height: 3em; /* line-height * line-clamp */
  width: 100%; /* 确保文本容器有明确的宽度 */
}
</style>
  1. 解释代码：
  • 使用 -webkit-box-orient: vertical; 和 -webkit-line-clamp: 2; 来限制显示的行数。
  • overflow: hidden; 和 text-overflow: ellipsis; 确保超出部分显示省略号。
  • line-height 和 max-height 需要根据实际的字体大小和行数调整，确保 max-height 是 line-height 乘以 line-clamp 的值。
  • 确保 .ellipsis-text 容器有明确的宽度，这有助于 CSS 正确计算溢出内容。
  1. 注意事项：
  • -webkit-line-clamp 是一个非标准的 CSS 属性，主要用于 WebKit 内核的浏览器（如 Safari 和 Chrome 的移动版），但大多数现代浏览器都对其有较好的支持。
  • 在某些极端情况下，特别是在复杂的布局或特定的 iOS 版本上，可能仍需要额外的调整或补丁。
  • 确保在真机上进行充分的测试，因为模拟器上的表现可能与真机有所不同。

通过上述方法，你应该能够在 uni-app 中实现文本超出两行时显示省略号，并且在 iOS 真机上也能正常工作。

回到顶部