Skip to content
This repository has been archived by the owner on Jun 3, 2021. It is now read-only.

字体在iOS14系统显示异常 #3302

Open
chenzhongsong opened this issue Nov 17, 2020 · 3 comments
Open

字体在iOS14系统显示异常 #3302

chenzhongsong opened this issue Nov 17, 2020 · 3 comments

Comments

@chenzhongsong
Copy link

.vue文件代码如下


<template>
  <div class="mu-page">
      <div class="border">
        <text class="text">左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题左边标题</text>
      </div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  // 局部注册的组件
  components: {
  },
  // 声明属性
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  /**
   * 组件实例创建完成,属性已绑定,但DOM还未生成,el属性还不存在
   */
  created() {},
  /**
   * 页面渲染完成 vm.$ el 替换,并挂载到实例上去之后调用该钩子
   * 巧用 this.nextTick 解决dom异步渲染未完成情况
   */
  mounted() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
   * 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  // 函数
  methods: {},
  /**
   * Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,
   * 所有的事件监听器会被移除,所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style scoped>
.mu-page{
  padding-top:200px;
}
.border {
  border-color: red;
  border-width: 1px;
  padding: 30px;
}
.f1 {
  flex: 1;
}
.text {
  word-wrap: break-word;
  word-break: normal;
  text-overflow: ellipsis;
  lines: 2;
}
</style>

iOS13和iOS14效果对比如下

image

iOS14最后一行字体被遮挡一部分

@Txink
Copy link
Contributor

Txink commented Nov 23, 2020

#3303

@cnryb
Copy link
Member

cnryb commented Nov 23, 2020

在 iOS14 设备中,并没有复现这个问题

@Acmenbackpack
Copy link

是不是行高不一致导致的...路人

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants