请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
286
帖子
2
勋章
7万+
Y币

[云开发] avm中text 标签安卓和ios 端效果不一致,不知道谁对谁错

[复制链接]
发表于 2022-1-13 16:36:48
avm中text 标签安卓和ios 端效果不一致,不知道谁对谁错,下面是代码:
  1. <template>
  2.         <view class="page">
  3.                 <view class="activity-item-text-box">
  4.                         <text class="activity-item-text-title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
  5.                         <text class="activity-item-text-introduction">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</text>
  6.                 </view>
  7.         </view>
  8. </template>
  9. <script>
  10. export default {
  11.         name: "test",
  12.         apiready() {},
  13.         data() {
  14.                 return {
  15.                         aaa: 2,
  16.                 }
  17.         },
  18.         methods: {},
  19. }
  20. </script>
  21. <style>
  22. .activity-item-text-introduction {
  23.         margin-top: 9px;
  24.         height: 53px;
  25.         font-size: 12px;
  26.         font-family: PingFangSC-Regular, PingFang SC;
  27.         color: #666c7b;
  28.         line-height: 24px;
  29.         text-overflow: ellipsis;
  30.         white-space: normal;
  31.         overflow: hidden;
  32.         display: -webkit-box;
  33.         -webkit-line-clamp: 2;
  34.         -webkit-box-orient: vertical;
  35.         background: #47b244;
  36. }
  37. .activity-item-text-title {
  38.         margin-top: 4px;
  39.         height: 20px;
  40.         font-size: 14px;
  41.         font-family: PingFangSC-Medium, PingFang SC;
  42.         font-weight: 500;
  43.         color: #33344a;
  44.         line-height: 20px;
  45.         text-overflow: ellipsis;
  46.         white-space: normal;
  47.         overflow: hidden;
  48.         display: -webkit-box;
  49.         -webkit-line-clamp: 2;
  50.         -webkit-box-orient: vertical;
  51. }
  52. .activity-item-text-box {
  53.         margin-top: 100px;
  54. }
  55. .page {
  56.         width: 100%;
  57.         height: 100%;
  58. }
  59. </style>
复制代码
一共两个问题:
问题1: 在安卓端,多行省略的,似乎是只是根据 文字的默认行高进行判断, 如果在css 中,吧line-height 更改后,多行省略的就会出现问题,就像上面的例子一下

问题2: 在ios 端, text 标签,看上去有默认的padding 高度, 我的demo 里面, 异常的text 标签加了绿色的背景

下面的测试的效果图

微信图片_20220112153915.jpg
286
帖子
2
勋章
7万+
Y币
这个例子是 ios 端和安卓端的文字样式不一致

  1. <template>
  2.         <view class="page">
  3.                 <view class="activity-item-text-box">
  4.                         <text class="activity-item-text-title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
  5.                         <text class="activity-item-text-introduction">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</text>
  6.                 </view>
  7.         </view>
  8. </template>
  9. <script>
  10. export default {
  11.         name: "test",
  12.         apiready() {},
  13.         data() {
  14.                 return {
  15.                         aaa: 2,
  16.                 }
  17.         },
  18.         methods: {},
  19. }
  20. </script>
  21. <style>
  22. .activity-item-text-introduction {
  23.         margin-top: 9px;
  24.         height: 53px;
  25.         font-size: 12px;
  26.         font-family: PingFangSC-Regular, PingFang SC;
  27.         color: #666c7b;
  28.         line-height: 12px;
  29.         text-overflow: ellipsis;
  30.         white-space: normal;
  31.         overflow: hidden;
  32.         display: -webkit-box;
  33.         -webkit-line-clamp: 2;
  34.         -webkit-box-orient: vertical;
  35.         background: #47b244;
  36. }
  37. .activity-item-text-title {
  38.         margin-top: 4px;
  39.         height: 20px;
  40.         font-size: 14px;
  41.         font-family: PingFangSC-Medium, PingFang SC;
  42.         font-weight: 500;
  43.         color: #33344a;
  44.         line-height: 20px;
  45.         text-overflow: ellipsis;
  46.         white-space: normal;
  47.         overflow: hidden;
  48.         display: -webkit-box;
  49.         -webkit-line-clamp: 2;
  50.         -webkit-box-orient: vertical;
  51. }
  52. .activity-item-text-box {
  53.         margin-top: 100px;
  54. }
  55. .page {
  56.         width: 100%;
  57.         height: 100%;
  58. }
  59. </style>
复制代码
我反馈给开发那边看下,今天团建去了
286
帖子
2
勋章
7万+
Y币
发现具体问题了,avm的text 标签,在ios 环境下,对苹果的 PingFang SC 字体兼容存在问题,使用这个字体后,整个avm的行高会出现问题,希望技术大佬赶紧修复
特特法爷 · 2022-1-13 16:48我反馈给开发那边看下,今天团建去了
您需要登录后才可以回帖 登录

本版积分规则