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自动适配 */
}
相关推荐
xieliyu.几秒前
计算机网络:Fiddler 抓包工具使用教程 + HTTP 协议报文格式详解
java·笔记·计算机网络·测试工具·http·java-ee·fiddler
步行cgn1 分钟前
@Value 详解:Spring 属性注入的核心注解
java·python·spring
博、、2 分钟前
智慧场馆小程序系统实战指南:从架构设计到落地部署
小程序
雪芽蓝域zzs8 分钟前
第十四节:后端返回权限动态路由
前端·javascript·vue.js
2401_850481178 分钟前
UVA815
java
冠品科技-小程序开发10 分钟前
做实体的,盲盒玩法别只停留在线下
小程序·软件构建·个人开发·软件需求
霸道流氓气质12 分钟前
Spring AI 多租户隔离方案
java·人工智能·spring
不会就选b17 分钟前
Linux之socket编程(七)----序列化与反序列化(1)
java·linux·服务器
Rain50918 分钟前
谁动了我的 URL?——记一次微前端“灵异 Bug“的排查实录
前端·vue.js·人工智能·前端框架·bug·ai编程
秋名RG20 分钟前
Java 工程师学习路线
java·学习方法