How to break a long text on a submit button

This an interesting thing I have found out while I was working on one of my project. If you have an input submit button with a long text it won't wrap according to the size of the column it is in. It crosses the column and overlaps in firefox and in IE it expands the column for the button to accomodate. While development I tried lot of things to make the text wrap in the button but in wain. My HTML looked some thing like this:

<input type="submit" name="Submit" value="This is a very very very very long text" />

In the end I came up with a solution.

My first solution for this problem was to remove the input submit button itself and use <button> instead, which worked well. So I changed my code in this way.

<button type="submit">This is a very <br> very very <br> very long text</button>

This worked well in both firefox and IE as the text got wrapped because of <br>. But lately I found a problem with this solution in IE. If you have more than one <button type="submit"> in the page IE will submit the last button even though you have clicked the first <button> which was not the desired behaviour.

Solution

The solution was a fairly small which worked well for me. Still I am not sure its the correct way to do this. There is two things that need to be done for firefox and IE. For firefox we need to add a css declaration white-space: normal and for IE you need to add HTML Coded Character &#13; - Carriage Return where ever you require the text to break. So the code looks like this:

<style>
input {
  white-space: normal;
}
</style>

<input type="submit" value="This is a very &#13; very very very &#13; long text" />

and it works!