uniapp textarea 行高如何调整

在uniapp中，如何调整textarea组件的行高？我尝试通过CSS设置line-height属性，但发现实际效果与预期不符，特别是在iOS和安卓平台上表现不一致。请问有没有跨平台兼容的解决方案？或者需要特殊处理才能生效？

2 回复

在uniapp中，调整textarea行高可以通过CSS的line-height属性实现。例如：line-height: 1.5; 设置行高为字体大小的1.5倍。


在 UniApp 中，调整 textarea 的行高可以通过 CSS 样式实现，主要使用 line-height 属性。以下是具体方法：

  1. 直接设置 line-height
    在 textarea 的样式中添加 line-height 属性，例如：

    <textarea style="line-height: 1.5;"></textarea>

    或通过类名设置：

    .custom-textarea {
  line-height: 1.5; /* 可调整数值，如 1.2、20px 等 */
}

  2. 使用全局样式
    在 App.vue 或页面样式中统一设置：

    textarea {
  line-height: 1.5;
}

注意事项：

  • 行高值可以是单位（如 px、em）或无单位数字（表示字体大小的倍数）。
  • 部分平台（如小程序）可能对 textarea 样式支持有限，建议测试目标平台兼容性。
  • 如果效果不明显，可结合 padding 调整内边距优化显示。

示例代码：

<template>
  <view>
    <textarea class="my-textarea" placeholder="输入内容"></textarea>
  </view>
</template>

<style>
.my-textarea {
  line-height: 1.6; /* 调整行高 */
  font-size: 14px; /* 建议同时设置字体大小 */
  padding: 10px;
}
</style>

通过以上方法即可灵活调整行高。

回到顶部