调整大小按钮时换行长单词

Question

现在我有以下用于订阅按钮的 html 代码

#submit {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
overflow-wrap: break-word;
}

<input id="submit" type="submit" name="submit" value="Subscribe" style="line-height: 1.35em; overflow-wrap: break-word;" />

当我创建手机布局时，我遇到了以下问题：当订阅按钮由于浏览器大小调整而调整大小时，它不是显示"订阅"，而是变成"subscr"或比原始单词短的内容。

如何在按钮内包装单词？

Answer 1

在 CSS 下面使用。

.truncate {
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 2

word-break: break-all

我想如果你想用字母包装，你正在寻找什么。如果您更喜欢按单词执行，也可以使用中断词。

#submit {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
word-break: break-all;
}

<button id="submit" type="submit" name="submit" style="line-height: 1.35em; overflow-wrap: break-word;">Subscribewithlotsoftext</button>