-webkit-line-clamp在苹果13/14机型在包含多标签的情况下表现异常的问题(目前仅在小程序测试过)

// typography.vue

<template>
    <div class="typography" :class="{ ellipsis }" :style="[typographyStyle]" @longpress.stop="clickEvent">
        <slot />
    </div>
</template>
<script>
export default {
    name: 'typography',
    props: {
        rows: {
            type: Number,
            default: 1
        },
        lineHeight: {
            type: [String, Number],
            default: '1em'
        },
        ellipsis: {
            type: Boolean,
            default: true
        },
        copyable: {
            type: Object,
            default: ()=>({ text: '' })
        }
    },
    computed: {
        typographyStyle({ rows, lineHeight }) {
            let style = {
                '-webkit-line-clamp': rows,
                'line-height': lineHeight
            }
            return style
        }
    },
    methods: {
        clickEvent() {
            const { text } = this.copyable
            if(text) {
                uni.setClipboardData({
                    data: text,
                    fail: (error) => {
                       console.log(error)
                    }
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.typography {
    width: 100%;    
    // line-height: 1em;
    text-align: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    white-space: nowrap;

    &.ellipsis {
        white-space: normal;
        word-break: break-all;
        display: -webkit-box; /**对象作为伸缩盒子模型展示**/
        -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
        // -webkit-line-clamp: 3; /**显示的行数**/
        overflow: hidden; /**隐藏超出的内容**/
        text-overflow: ellipsis;
    }

}
</style>

// index.vue

<template>
    <Typography :rows="lineRowCount" line-height="40rpx">
       <text v-if="isSpecial">特殊标签</text> <!-- 这里是一个前置数据 -->
       <text>这里是显示溢出隐藏的内容</text>  <!-- 这里是正文内容 -->
    </Typography>
</template>
<script>
   import Typography from "./Typography"
  export default {
    components: {
      Typography
    },
    data() {
        return {
            isSpecial: true,
            isIos14: true
        }
    },
    computed() {
      lineRowCount() {
            // 由于显示的是多行溢出隐藏，默认值给2
            // 当前由于苹果14*的问题，如果存在“特殊标签”的内容，它会默认把“特殊标签”模块当成一行，所以如果在存在“特殊标签”的时候，同时也需要判断是否是苹果14*，需要再加一行
          return 2 + (this.isSpecial && this.isIos14?1:0)
      }
    }
  }
</script>

问题表现：

由于苹果14*的问题，如果存在“特殊标签”的内容，它会默认把“特殊标签”模块当成一行，当lineRowCount为2时，就会出现的效果是仅在单行就会显示为省略号

解决方案：

在存在“特殊标签”的时候，同时也需要判断是否是苹果14*，需要lineRowCount再加一行或者根据标签的数量增加行数（未测试）

此问题已被修复！(衍生了另一个问题：当lineRowCount大于2时展示为lineRowCount本身，如果为2时，只显示单行)