html - 是否可以在两行中输出“提交”的值？

Question

我有一个迷你表单，我需要将提交按钮值的长文本分成两行，以便它适合父 div 的宽度。我尝试设置提交按钮的宽度，但这并不能解决问题。

Answer 1

使用<button type="submit">而不是<input type="submit">. 这将允许您将按钮的内容提供为 HTML 而不是纯文本，从而允许您根据需要设置按钮内容的格式。

最基本的解决方案是手动包含换行符：

<button type="submit">Foo<br/>Bar</button>

当然，您还可以对按钮内容使用更高级的 CSS 布局。

看到它在行动。

Answer 2

将您想要的文本包装在第二行<span>并：

span{
    display:block
}

Answer 3

<style>
.buttontext {
  width: 10px;
  white-space: wrap;
  display: block;
}
</style>
<button><span class=buttontext>Very long text Very long text
Very long text</span></button>

这会将文本包装在所需的行上。

Answer 4

以下将在按钮上包装文本。请注意，我已经指定了宽度。

<input type="button" value="This is some text on the button" style="white-space:normal; width:100px;" />