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

Comments

  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#

    <button>line1<br/>line2<br/>line3</button>

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

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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