white-space:normal属性在ACF文本输入字段上不生效如何解决

• 首先排查字段类型：如果你用的是*单行文本（Text）类型字段，本身<input>标签天生不支持多行换行展示，无论加什么CSS都无法实现自动折行，必须替换成多行文本（Text Area）*类型字段。
• 如果你已经使用多行文本字段，单独设置white-space: normal不生效是属性选择错误+缺少配套样式，直接给输入框应用以下CSS即可：

/* 可根据你的表单实际class调整选择器，以下为ACF前端表单通用选择器 */
.acf-form textarea {
  /* 不要用normal，pre-wrap会保留用户手动输入的换行，同时内容超宽时自动折行 */
  white-space: pre-wrap !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden; /* 强制隐藏横向滚动条 */
  resize: vertical; /* 可选配置：仅允许纵向拉伸输入框，避免横向拉伸打乱页面布局 */
}

• 样式不生效排查：如果加完上述代码还是存在横向滚动，打开浏览器开发者工具选中对应输入框，在「计算样式（Computed）」面板检查是否有主题、其他插件的CSS给输入框设置了更高优先级的white-space: nowrap、overflow-x: scroll属性，对应提升自定义CSS的选择器优先级即可。

问题效果参考：

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