H5 safari或者移动端浏览器 css溢出问题

[GZWZC]

相关平台

H5

复现仓库

https://github.com/
浏览器版本: Safari13 Safari14
使用框架: React

复现步骤

假定页面A，有任意一行文字，限制宽度后，css设置为以下代码。然后用手机浏览器或Safari访问，第一次加载的时候是不生效的，

1. 如果设置行内式style为{}，100ms后设置为以下属性，则生效
2. 跳转到B页面，然后又返回到A页面，则生效

    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    word-break: break-all;

期望结果

css溢出任何情况下都生效

实际结果

不生效

环境信息

👽 Taro v3.0.11


  Taro CLI 3.0.11 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.18.4 - /usr/local/bin/node
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.11 => 3.0.11 
      @tarojs/components: 3.0.11 => 3.0.11 
      @tarojs/mini-runner: 3.0.11 => 3.0.11 
      @tarojs/react: 3.0.11 => 3.0.11 
      @tarojs/runtime: 3.0.11 => 3.0.11 
      @tarojs/taro: 3.0.11 => 3.0.11 
      @tarojs/webpack-runner: ^3.0.24 => 3.0.24 
      babel-preset-taro: 3.0.11 => 3.0.11 
      eslint-config-taro: 3.0.11 => 3.0.11 
      react: ^16.10.0 => 16.13.1 
      taro-ui: 3.0.0-alpha.3 => 3.0.0-alpha.3 
    npmGlobalPackages:
      typescript: 4.0.3

[JferLao]

有人解决过这个问题吗，我也遇到了，只不过我是安卓端首次显示有问题，在ios端没问题

[luckyadam]

Duplicate of #8688

[GZWZC]

项目更新到3.2.0-canary.3 。还是会出现这个问题

👽 Taro v3.0.11

Taro CLI 3.0.11 environment info:
System:
OS: macOS 10.15.6
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.4 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.3.0 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/components: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/mini-runner: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/react: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/runtime: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/taro: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/webpack-runner: 3.2.0-canary.3 => 3.2.0-canary.3
babel-preset-taro: 3.2.0-canary.3 => 3.2.0-canary.3
eslint-config-taro: 3.2.0-canary.3 => 3.2.0-canary.3
react: ^16.10.0 => 16.13.1
taro-ui: 3.0.0-alpha.3 => 3.0.0-alpha.3
npmGlobalPackages:
typescript: 4.0.3

[rotd01]

有人解决过这个问题吗，我也遇到了，只不过我是安卓端首次显示有问题，在ios端没问题

解决了，要用Text标签才行

[rotd01]

项目更新到3.2.0-canary.3 。还是会出现这个问题

Taro v3.0.11

Taro CLI 3.0.11 environment info:
System:
OS: macOS 10.15.6
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.4 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.3.0 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/components: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/mini-runner: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/react: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/runtime: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/taro: 3.2.0-canary.3 => 3.2.0-canary.3
@tarojs/webpack-runner: 3.2.0-canary.3 => 3.2.0-canary.3
babel-preset-taro: 3.2.0-canary.3 => 3.2.0-canary.3
eslint-config-taro: 3.2.0-canary.3 => 3.2.0-canary.3
react: ^16.10.0 => 16.13.1
taro-ui: 3.0.0-alpha.3 => 3.0.0-alpha.3
npmGlobalPackages:
typescript: 4.0.3

把文字放到Text标签中，就没问题了