如何在React Formik输入框中实现placeholder文本自动换行

出现该问题的核心原因是你当前使用的是type="text"的单行输入框，浏览器原生限制了这类输入框的placeholder不能换行，溢出内容会直接显示省略号，和FormikTextInput组件本身无关。

下面提供两种可落地的解决方法：

方案1：改用textarea类型（推荐，改造成本最低） #

FormikTextInput组件通常默认对textarea类型做了适配，修改后即可天然支持多行提示：

• 修改组件的type属性为textarea，配置初始行数为1，保持和原单行输入框视觉一致：

<FormikTextInput
  name="Address"
  type="textarea"
  placeholder="124 Example St, Redwood City, CA, 91234"
  rows={1}
/>

• 新增配套CSS样式，既实现placeholder强制换行，又屏蔽textarea默认的多行控件样式：

/* 适配所有浏览器的placeholder换行规则 */
::-webkit-input-placeholder { /* WebKit内核浏览器 */
  white-space: pre-line;
  word-break: break-all;
}
::-moz-placeholder { /* 火狐浏览器 */
  white-space: pre-line;
  word-break: break-all;
}
:-ms-input-placeholder { /* IE浏览器 */
  white-space: pre-line;
  word-break: break-all;
}

/* 重置地址输入框的textarea默认样式 */
textarea[name="Address"] {
  resize: none; /* 禁止用户拖拽调整输入框大小 */
  min-height: 40px; /* 可替换为项目中原单行输入框的高度值 */
  line-height: 1.5;
  padding: 8px 12px; /* 可替换为项目中原输入框的内边距 */
}

方案2：自定义placeholder层（需保留type="text"时使用） #

如果业务要求必须使用单行文本输入框，可抛弃原生placeholder属性，自己实现提示层：

• 在输入框同级新增一个绝对定位的文本节点，位置和输入框的文字位置完全重叠
• 绑定两个控制显示的条件：输入框未处于聚焦状态、Formik中values.Address的值为空
• 普通文本节点天然支持自动换行，不需要额外适配浏览器特性，视觉效果完全可控

内容的提问来源于stack exchange，提问作者userrj_vj_051620