Programming

Adding Line Breaks to an HTML Input Button

May 30, 2011

I ran into a small little quirk today when trying to add a line break to a simple Input Button. All of the methods that immediately came to mind failed. I tried adding a <br /> however it literally printed that tag out between my words. I also tried forcing a new line with \n which did the same thing, spit it out literally. I tried tweaking the CSS and had nothing but unexpected results as well. Eventually I tried adding several extra spaces between the words, hoping that it would force it to word wrap — but instead it printed out each space literally. Then it occurred to me, if it’s not ignoring extra white space like HTML normally does, will it not ignore a line break? Sure enough, it was that simple. To break the text up in your HTML Input Buttons all you have to do is tap the enter key and make sure the line of code is broken into several lines.

Wrong:

<input type="button" value="Separate<br />Lines" />

Wrong:

<input type="button" value="Separate\nLines" />

Right:

<input type="button" value="Separate
Lines" />

Only registered users can comment.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.