Treehouse: 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.

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```