uni-app word-wrap 显示不支持

操作步骤：

编译出现

预期结果：

支持

实际结果：

编译出现警告

bug描述：

nvue 显示不支持 word-wrap，weex 文档有，官方文档也有
https://uniapp.dcloud.io/tutorial/nvue-css.html#%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F

相关链接：

https://ask.dcloud.net.cn/question/136478

bupafengyu 1楼•13 天前

Android平台：nvue 暂不支持 word-wrap

bupafengyu 2楼•13 天前

条件编译不支持 android 和 ios，怎么修改

gougou168 3楼•13 天前

回复码字如山: 如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持ifios、ifAndroid代码块，可方便编写判断。

caililin 4楼•13 天前

在 uni-app 中，word-wrap 是一个 CSS 属性，用于控制长单词或 URL 的换行行为。通常情况下，word-wrap 是支持的，但如果你遇到不支持的情况，可能是由于以下原因：

1. 平台差异

uni-app 是一个跨平台框架，支持多个平台（如 H5、小程序、App 等）。不同平台对 CSS 的支持程度可能有所不同。例如，某些小程序平台可能对 word-wrap 的支持不完全。

2. CSS 属性名称

在某些平台或浏览器中，word-wrap 可能需要使用 overflow-wrap 来代替。overflow-wrap 是 word-wrap 的标准化名称，功能相同。

.my-class {
    overflow-wrap: break-word;
}

3. 兼容性处理

如果你需要兼容多个平台，可以同时使用 word-wrap 和 overflow-wrap：

.my-class {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

4. 使用 `white-space` 属性

如果你只是想控制文本的换行行为，可以尝试使用 white-space 属性：

.my-class {
    white-space: normal; /* 允许换行 */
}

5. 检查平台

如果你确定某个平台不支持 word-wrap，可以使用 uni-app 的条件编译来处理：

/* #ifdef H5 */
.my-class {
    word-wrap: break-word;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.my-class {
    overflow-wrap: break-word;
}
/* #endif */

6. 使用 `word-break`

如果你需要更严格的控制换行行为，可以尝试使用 word-break 属性：

.my-class {
    word-break: break-all; /* 强制换行 */
}

7. 检查样式优先级

确保你的样式没有被其他样式覆盖。可以使用开发者工具检查元素的最终样式。

8. 使用 `flex` 布局

如果你在 flex 布局中遇到问题，可以尝试调整 flex 容器的属性：

.my-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
}