textarea 在uni-app微信小程序里安卓手机设置style="word-break: break-word;" 也不换行

textarea 在uni-app微信小程序里安卓手机设置style=“word-break: break-word;” 也不换行

示例代码：

<textarea  
  ref="contentTextareaRef"  
  style="word-break: break-word"  
  class="content-textarea"  
  v-model="formData.content"  
  placeholder="复制作文内容或拍照上传，不超过5000个单词"  
  maxlength="10000"  
></textarea>

.content-textarea {  
  width: 90%;  
  padding: 14px;  
  height: 300px;  
  margin: 0 auto 20px auto;  
  border: 1px solid #e5e5e5;  
  border-radius: 4px;  
  word-wrap: break-word;  
  word-break: normal;  
  overflow-y: auto;  
}  

::v-deep .uni-textarea-wrapper .uni-textarea-textarea {  
  overflow-wrap: break-word !important; // 确保长单词在容器边界换行  
  word-break: break-word !important;  
  border: 1px solid red;  
}  
::v-deep uni-textarea {  
  word-break: break-word;  
}

操作步骤：

  • 使用上面的步骤即可复现

预期结果：

  • 预期是在微信小程序的安卓手机上也支持行末尾按照单词换行

实际结果：

  • 在微信小程序的安卓手机换行不生效，在微信小程序的开发者工具是可以正常换行的，用真机预览就不换行了

bug描述：

  • 用的基础组件textarea , 我想实现在微信小程序里的英文单词按照单词处理行末尾的换行，和之前这个朋友提出的问题是一样的：

bug 链接

  • 在微信开发者工具里是可以正常换行的，但是我在真机预览以及微信小程序的体验版里都是不会换行


更多关于textarea 在uni-app微信小程序里安卓手机设置style="word-break: break-word;" 也不换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于textarea 在uni-app微信小程序里安卓手机设置style="word-break: break-word;" 也不换行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的微信小程序原生组件在安卓端的兼容性问题。在微信小程序中，textarea 是原生组件，其渲染行为与 WebView 不同，特别是在安卓设备上对 word-break 属性的支持不完善。

解决方案：

  1. 使用 white-space: pre-wrap 替代：
.content-textarea {
  white-space: pre-wrap;
}
  1. 如果必须保留单词完整性，可以考虑用 JavaScript 在输入时自动插入换行符：
watch: {
  'formData.content'(newVal) {
    this.formData.content = newVal.replace(/(.{20})/g, "$1\n")
  }
}
回到顶部