CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user1879703
user1879703

Reputation: 241

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>

Upvotes: 6

Views: 7380

Answers (5)

Pugazh
Pugazh

Reputation: 9561

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

Upvotes: 0

Ashok Shah
Ashok Shah

Reputation: 956

word break helps you there

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

Upvotes: 3

ElGavilan
ElGavilan

Reputation: 6924

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:

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

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99554

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>

Upvotes: 4

Goran.it
Goran.it

Reputation: 6297

Try this Fiddle Demo

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

Upvotes: 0

Related Questions