|
[云开发]
avm中text 标签安卓和ios 端效果不一致,不知道谁对谁错
[复制链接]
avm中text 标签安卓和ios 端效果不一致,不知道谁对谁错,下面是代码:
- <template>
- <view class="page">
- <view class="activity-item-text-box">
- <text class="activity-item-text-title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
- <text class="activity-item-text-introduction">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</text>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: "test",
- apiready() {},
- data() {
- return {
- aaa: 2,
- }
- },
- methods: {},
- }
- </script>
- <style>
- .activity-item-text-introduction {
- margin-top: 9px;
- height: 53px;
- font-size: 12px;
- font-family: PingFangSC-Regular, PingFang SC;
- color: #666c7b;
- line-height: 24px;
- text-overflow: ellipsis;
- white-space: normal;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- background: #47b244;
- }
- .activity-item-text-title {
- margin-top: 4px;
- height: 20px;
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #33344a;
- line-height: 20px;
- text-overflow: ellipsis;
- white-space: normal;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .activity-item-text-box {
- margin-top: 100px;
- }
- .page {
- width: 100%;
- height: 100%;
- }
- </style>
复制代码 一共两个问题:
问题1: 在安卓端,多行省略的,似乎是只是根据 文字的默认行高进行判断, 如果在css 中,吧line-height 更改后,多行省略的就会出现问题,就像上面的例子一下
问题2: 在ios 端, text 标签,看上去有默认的padding 高度, 我的demo 里面, 异常的text 标签加了绿色的背景
下面的测试的效果图
|
|