Adding Line Breaks to an HTML Input Button

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" />

Tags: , ,

  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS

One Response to “Adding Line Breaks to an HTML Input Button”

  1. Manikandan Sethuraju says:

    Gr8 & Thanks !!!

Leave a Reply