是否可以在两行中输出'submit'的值？

时间：2020-12-26 20:13:08

I have a mini form and I need the long text of the value of submit button to be broken down in two rows so it will fit the width of the parent div. I tried setting the width of the submit button but that does not do the trick.

我有一个迷你表单,我需要提交按钮值的长文本分为两行,以便它适合父div的宽度。我尝试设置提交按钮的宽度,但这不起作用。

4 个解决方案

#1

Use <button type="submit"> instead of <input type="submit">. This will allow you to provide the button's contents as HTML instead of plain text, allowing you to format the button's contents however you want.

使用

The most basic solution would be to manually include a line break:

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

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

And of course you can also use more advanced CSS layouts for the button contents.

当然,您也可以使用更高级的CSS布局作为按钮内容。

See it in action.

看到它在行动。

#2

Wrap the text you want on 2nd row in <span> and:

在中的第二行包装所需的文本,然后:

span{
    display:block
}

#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>

This will wrap the text over the lines required.

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

#4

The following will wrap the text on a button. Notice that I have specified a width.

以下内容将文本包装在按钮上。请注意,我已指定宽度。

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

#1

使用