antd textarea过长的placeholder导致控件高度不同处理方法

场景：

在项目过程中，我遇到了一个业务要求，就是支持用户去换行输入多个编码来做查询条件，这个实现了，但是随着而来的一个UI问题就是，placeholder提示文本过长导致控件高度增长了，这个时候UI不满意了，让我把它处理成一行，于是有了下面的解决方案。。。

---

原因分析：

因为使用的是 antd 的 Input.TextArea 组件，组件会根据输入内容自动计算高度，我发现 placeholder 也会计算高度的，这个时候我的方案是用户在没有输入内容时，把高度定死

---

解决方案：

<Input.TextArea
   ref={(ref) => (this.zMultInput = ref)}
   /**
    * search_textarea: CSS禁用右下角可调整输入框大小
    * search_textarea_one: css控制高度 35px
    */
   className={classNames('search_textarea', rowCount == 0 && 'search_textarea_one')}
   onChange={this.onChange}
   autoSize={{ maxRows: 6 }} // 最多展示6行
   {...rest}
 />

组件的具体实现我们就先不看了，我们可以看到这里有一段
className={classNames('search_textarea', rowCount == 0 && 'search_textarea_one')}
里面rowCount是我将内容转换成数组存的变量，rowCount == 0的情况说明用户没有输入内容，这个时候我们加入一个新的class

// 搜索的多行文本框
.search_textarea_one { // 高度定死35px，防止过长的placeholder导控件致出现两行甚至更多，配合文本超出省略 ...
  height: 35px !important;
}
.search_textarea,
.search_textarea > .ant-input {
  min-height: 35px;
  resize: none; // 清除用户可拉伸高度的图标
  &&::-webkit-input-placeholder { // 过长的placeholder提示 文本超出省略 ...
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

因为组件的其它输入框也是定死在35px，所以我这里也没做兼容处理，直接定死高度，加上!important是为了防止被行内样式覆盖掉，然后就是将过长的提示给处理成省略号…

结尾：

谢谢大佬的阅读，如果有更好的方案，可以来评论里细讲~~