uni-app nvue中word-wrap:anywhere; 在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea均无效果

uni-app nvue中word-wrap:anywhere; 在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea均无效果

测试过的手机

  • 华为p40plus
  • iPhoneX

操作步骤

  • nvue中word-wrap:anywhere; 长单词中间换行，在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea都无效果，代码请看附件。效果如图：

预期结果

  • nvue中word-wrap:anywhere; 长单词中间换行，在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea都无效果，代码请看附件。效果如图：

实际结果

  • nvue中word-wrap:anywhere; 长单词中间换行，在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea都无效果，代码请看附件。效果如图：

bug描述

  • nvue中word-wrap:anywhere; 长单词中间换行，在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea都无效果，代码请看附件。效果如图：

相关链接

附件


更多关于uni-app nvue中word-wrap:anywhere; 在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea均无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

同样遇到该问题，有解决方案吗？

更多关于uni-app nvue中word-wrap:anywhere; 在iOS的text显示正常，在安卓的text显示无效果，安卓和iOS的textarea均无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


android平台暂时不支持word-wrap属性

在 uni-app 的 nvue 中，word-wrap: anywhere; 的兼容性问题确实存在，这主要是由于不同平台底层渲染引擎的差异导致的。

问题分析：

  • iOS 的 text 组件基于原生 UILabel 实现，对 word-wrap: anywhere; 支持较好。
  • Android 的 text 组件基于原生 TextView，对 CSS3 的 anywhere 值支持不完整。
  • textarea 组件在两端平台底层实现不同，均未完整支持该属性。

解决方案：

  1. 使用兼容性更好的属性：

    /* 优先使用 break-word */
word-wrap: break-word;
word-break: break-all;

  2. 针对 Android 的降级方案：

    /* 条件编译区分平台 */
/* #ifdef APP-PLUS */
/* Android 专用样式 */
/* #endif */
回到顶部