Question

我有一个输入按钮，我想把文字“Estimate Shipping”看作是：

“估计
运送“

相反。我怎么能这样做？

这是我的Jsfiddle。

示例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>

Answer 1

为了打破按钮输入值，您可以使用line feed character 
（HTML实体），如下所示“

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

<强> Updated Demo

您还可以使用<button>元素将第二个单词移到下一行：

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

Answer 2

分词帮助你

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

Answer 3

试试这个 Fiddle Demo

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

Answer 4

使用CSS设置按钮的宽度，以便第二个单词换行到下一行。或者，您也可以使用<button>标记：

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

Answer 5

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

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

Demo

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

5 个答案: