Grow your CSS skills. Land your dream job.

Last updated on:

Button With Line Breaks

You can use carriage return characters to break the line: 

<input type="button" value="Really&#x00A;Tall&#x00A; Button">


  1. In last Opera (11.51) doesn’t work.

  2. Permalink to comment#

    Doesen’t work on ipad either.

  3. Doesn’t work in Dolphin Mini Browser on Android

  4. johndoe
    Permalink to comment#


    better solution.

  5. i think johndoe’s solutions is better..

    • Permalink to comment#

      It works fine when you need a <button>, but when you want an honest to goodness button input, it’s a poor semantic replacement.

  6. The code should also work fine :

    between opening and closing tags –

    (input type=”submit” value=”Really
    Button” / )

    Write “Tall” and “Button” from the next line. Space is also counted in ” ” .

  7. Permalink to comment#

    Tested and failed.

  8. I preferred CSS Techniques “white-space: normal;” and it works fine.

  9. Pawan
    Permalink to comment#

    Nice Code. :)

  10. Mujahid
    Permalink to comment#

    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

  11. Alexey
    Permalink to comment#

    Thank you Joel! Works like a charm.

  12. 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.

  13. Using style “white-space: normal;” and also set width for button. It will break the line.

  14. i prefer to use css in this case :)

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".