Your best bet is a <button>
so you can use a <br>
inside, like:
<button>
Some
<br>
Text
</button>
If you need it to be an <input>
, and thus the text has to be in a value
, it used to be somewhat reliable to use 
 (a carridge return) to break a line in a value like this:
<input type="button" value="Really
Tall
Button">
That still works in Firefox, but doesn’t seem to work in Chrome anymore, and is dangerous in Safari where it cuts off the text after the first entity.
See the Pen Line Breaks in Buttons by Chris Coyier (@chriscoyier) on CodePen.
In last Opera (11.51) doesn’t work.
does it work on internet explorer?????
<input type=”submit” value= topValue bottomValue” onclick=”this.style.visibility=’hidden'” class=”button” />
not working for line feed or carriage return on internet explorer 11
<input type=”submit” value= topValue 
 bottomValue” onclick=”this.style.visibility=’hidden’” class=”button” />
not working for line feed or carriage return on internet explorer 11
How do I give the buttons a fixed width? Lets say 150px?
Doesen’t work on ipad either.
Doesn’t work in Dolphin Mini Browser on Android
<button>line1<br/>line2<br/>line3</button>
better solution.
i think johndoe’s solutions is better..
It works fine when you need a
<button>
, but when you want an honest to goodness button input, it’s a poor semantic replacement.The code should also work fine :
between opening and closing tags –
(input type=”submit” value=”Really
Tall
Button” / )
Write “Tall” and “Button” from the next line. Space is also counted in ” ” .
Tested and failed.
I preferred CSS Techniques “white-space: normal;” and it works fine.
This is working fine, you are FANTASTIC :)
Thanks Joel !! Css is often the best solution :)
thnks Joel, ths is working………………….
That’s right, thank you Joel!
It works perfectly!
You just set the width you want and the “white-space:normal;” does it’s thing;
thumbs up Joel Norman!
This is the only solution that actually works for me. Thanks!!
Nice Code. :)
I hope this one will also work
<button style="white-space: normal">This is a really really big line of code</button>
It will break down the texts into multiple lines
Yea this one works for sure.
how would you line break on this?
this one works, tx
Thank you Joel! Works like a charm.
uxfindings.blogspot.com: I think that there are positives and negatives. Here are my two thoughts on the topic.
From a UX standpoint:
I’d like to submit to you that although this is a functionality that can be accomplished, there is also possibility that it may not be the best experience for the user. The reason is that there is a chance that the button text will be difficult for the user to scan.
From a Developer standpoint:
If you use a constant or variable that has a human readable name like this…
var carriageReturn = "{code]";
Then it should be quite usable.
Using style “white-space: normal;” and also set width for button. It will break the line.
i prefer to use css in this case :)
Yeah, after testing a few things, the CSS is the best solution to give a break in a button. That is said if you want to the button to break automatically and not at specific words.
If you want a button to break at certain words, you can always change the width of the button with CSS or create a graphic button that can be used.
When it comes to CSS… there is nothing that you won’t be able to do.
Thanks Joel
How about that responsive buttons via media queries. So you can target exactly when to break.
Then you just add this class:
.only-mobile {
display: none;
@include media($break-md) {
display: block;
}
}
@include media is a bourbon mixin (behaves like a media query)
This is a really really big line of code
this code is not working……….
“white-space: normal;” only shows the first word in IOS9
It work fine in Firefox, Safari and Chrome but not ios9
Bad article, not working. Please remove this post
Yes, but what about an <input type="submit" value="How to wrap text here is the question” /> … say at a specific point after the word ‘text’, without the html br tag being shown?
try with this also, word-wrap: break-word;
try this its work for me.
white-space: normal;