Geek Answers Handbook

Divide the text of the enter button into two lines, on top of the other

I have an input button that I would like to take in the text "Delivery Estimation" and do this:

"Rating
Delivery "

Instead. How can i do this?

Here is my Jsfiddle .

HTML example:

<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>
+6
source share
5 answers

To break the input value of a button, you can use the line symbol &#10; (HTML object) as follows:

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

Updated demo .

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

 <button> Hello <br> World! </button>
+4
source

the word break helps you there

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

Try Screenshot

 <button> Estimate<br /> Shipping </button>
0
source

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

 <button> Estimate<br /> Shipping </button>
0
source

You can use the built-in style attribute as shown below.

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

Demo

0
source

More articles:


All Articles