ts+unispp小程序textarea多行文本高度自使用

效果图:

代码:

复制代码
<!-- 在textarea标签中添加auto-height属性 -->
<textarea
  placeholder="无"
  placeholder-class="placeholder"
  :disabled="true"
  class="textarea-style"
  :value="orderDetails?.couponInfo"
  auto-height  <!-- 关键:启用自动高度调整 -->
></textarea>

.textarea-style {
  width: 100%; /* 改为100%适应父容器,避免内容溢出 */
  border: 2rpx solid #e7e7e7;
  /* 移除height: auto,由auto-height属性控制 */
  min-height: 100rpx; /* 保留最小高度,确保初始占位 */
  border-radius: 12rpx;
  flex: 1;
  padding: 16rpx; /* 适当增大内边距,优化显示 */
  word-break: break-all; /* 强制换行,避免内容溢出 */
  white-space: pre-wrap; /* 保留文本中的换行符(如\n、↵)并自动换行 */
  box-sizing: border-box; /* 关键:让padding和border不影响整体宽度 */
  resize: none; /* 禁止手动拉伸(可选,根据需求) */
  overflow: hidden; /* 隐藏滚动条,由auto-height自动适配 */
}
相关推荐
崔庆才丨静觅37 分钟前
hCaptcha 验证码图像识别 API 对接教程
前端
曹牧1 小时前
Spring Boot:如何测试Java Controller中的POST请求?
java·开发语言
passerby60611 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
爬山算法2 小时前
Hibernate(90)如何在故障注入测试中使用Hibernate?
java·后端·hibernate
kfyty7252 小时前
集成 spring-ai 2.x 实践中遇到的一些问题及解决方案
java·人工智能·spring-ai
猫头虎2 小时前
如何排查并解决项目启动时报错Error encountered while processing: java.io.IOException: closed 的问题
java·开发语言·jvm·spring boot·python·开源·maven
李少兄2 小时前
在 IntelliJ IDEA 中修改 Git 远程仓库地址
java·git·intellij-idea