将输入按钮的文本拆分为2行，在另一行的顶部

I have an input button that I'd like to take the text "Estimate Shipping" and make it look like:

我有一个输入按钮,我想把文字“估计运输”,并使它看起来像:

"Estimate
Shipping"

Instead. How can I do that?

代替。我怎样才能做到这一点?

Here is my Jsfiddle.

这是我的Jsfiddle。

Sample HTML:

    <div class="span12">
    <form class="form-vertical form-inline" id="ShipEstimate" novalidate="novalidate">
    <div class="control-group floating-label-form-group">
    <fieldset>
    <div class="controls">
    <label for="PostalCode_Ship" title="Zip">
    Enter Zipcode:
    </label>
    <input type="text" id="PostalCode_Ship" value="45356" name="PostalCode_Ship" onchange="populateCartTotalInCartPage();" minlength="5" placeholder="Enter Zipcode">
    <input type="hidden" id="Country_Ship" name="Country_Ship" value="US">
    <input type="button" onclick="populateCartTotalInCartPage();" value="Estimate Shipping" id="GetQuotes" class="btn btn-orange">


    <input type="radio" style="display:none" id="shipping_method" name="shipping_method" value="1000022" onchange="populateCartTotalInCartPage();"> 



    <input type="radio" style="display:none" id="shipping_method" name="shipping_method" value="1000001" onchange="populateCartTotalInCartPage();"> 



    <input type="radio" style="display:none" id="shipping_method" name="shipping_method" value="1000004" onchange="populateCartTotalInCartPage();"> 



    <input type="radio" style="display:none" id="shipping_method" name="shipping_method" value="1000005" onchange="populateCartTotalInCartPage();"> 



    <input type="radio" style="display:none" id="shipping_method" name="shipping_method" value="1000009" onchange="populateCartTotalInCartPage();"> 



    <input type="radio" style="display:none" id="shipping_method" name="shipping_method" value="1000010" onchange="populateCartTotalInCartPage();"> 


    </div></fieldset>
    </div>
    </form>
    </div>

5 个解决方案

#1

In order to break the button input value, you could use line feed character 
 (HTML entity) as follows"

为了打破按钮输入值,您可以使用换行符 (HTML实体)如下“

<input type="button"  value="Estimate&#10;Shipping">

Updated Demo.

You can also use <button> element to move the second word to the next line:

您还可以使用

<button>
  Hello <br>
  World!
</button>

#2

word break helps you there

分词帮助你

#getQuotes
{
    width: 94px;
    word-break: break-word;
}

#3

Try this Fiddle Demo

试试这个小提琴演示

<button>
Estimate<br />
Shipping 
</button>

#4

Use CSS to set the width of the button so that the second word wraps to the next line. Alternatively, you can also use the <button> tag:

使用CSS设置按钮的宽度,以便第二个单词换行到下一行。或者,您也可以使用

<button>
Estimate<br />
Shipping 
</button>

#5

You can use inline style attribute like below.

您可以使用如下所示的内联样式属性。

<input type="button" onclick="populateCartTotalInCartPage();" value="Estimate Shipping" id="GetQuotes" class="btn btn-orange" style="width:90px !important;word-break: break-word;">

Demo

#1