Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Split text of input button into 2 lines, on on-top of the other

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.

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>
like image 412
user1879703 Avatar asked Feb 25 '14 18:02

user1879703


1 Answers

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

<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>
like image 118
Hashem Qolami Avatar answered Sep 22 '22 10:09

Hashem Qolami