提交按钮文本超出父容器宽度时如何实现自动换行？

<input type="submit"> 是原生替换元素，默认自带white-space: nowrap样式，所以即便你限制了按钮宽度，文本也不会自动换行，只会被截断。

方案1：保留input标签，补充CSS规则 #

在原有CSS基础上添加换行相关属性即可，修改后的完整样式如下：

.parent-container{
    display: flex;
    flex-flow: row wrap;
}

input[type="submit"]{
    width: 100%;
    /* 允许文本自动换行 */
    white-space: normal;
    /* 长单词自动折行 */
    word-wrap: break-word;
    /* 可选：极端长单词/无空格文本强制折断，避免溢出 */
    word-break: break-all;
    /* 可选：清除移动端原生按钮默认样式，避免规则被覆盖 */
    appearance: none;
}

方案2：替换为button标签（兼容性更优） #

如果没有强制使用input实现提交按钮的需求，更推荐用<button>标签替代，天生支持多行文本，不需要额外配置换行规则就能生效：
修改后的HTML代码：

<button type="submit">This is a submit button with a very long line of text which causes issues</button>

原有父容器的CSS不需要修改即可正常使用。

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