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. Shilov Vlad [Omgovich]
    Permalink to comment#

    In last Opera (11.51) doesn’t work.

    • adnan
      Permalink to comment#

      does it work on internet explorer?????

    • adnan
      Permalink to comment#

      <input type=”submit” value= topValue bottomValue” onclick=”this.style.visibility=’hidden'” class=”button” />

      not working for line feed or carriage return on internet explorer 11

    • adnan
      Permalink to comment#

      <input type=”submit” value= topValue &#10 bottomValue” onclick=”this.style.visibility=’hidden’” class=”button” />

      not working for line feed or carriage return on internet explorer 11

  2. Robert
    Permalink to comment#

    Doesen’t work on ipad either.

  3. SerInformaticos
    Permalink to comment#

    Doesn’t work in Dolphin Mini Browser on Android

  4. johndoe
    Permalink to comment#

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

    better solution.

  5. Ταβέρνα
    Permalink to comment#

    i think johndoe’s solutions is better..

    • Jordan
      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. Rohit Makkar
    Permalink to comment#

    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. TechView
    Permalink to comment#

    Tested and failed.

  8. Joel Norman
    Permalink to comment#

    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. eeklipzz
    Permalink to comment#

    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. Ahmad Fahrurroji
    Permalink to comment#

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

  14. Mohamed Yahia
    Permalink to comment#

    i prefer to use css in this case :)

  15. Christo @ optisure.co.za
    Permalink to comment#

    Yeah, after testing a few things, the CSS is the best solution to give a break in a button. That is said if you want to the button to break automatically and not at specific words.

    If you want a button to break at certain words, you can always change the width of the button with CSS or create a graphic button that can be used.

    When it comes to CSS… there is nothing that you won’t be able to do.

    Thanks Joel

  16. Andi
    Permalink to comment#

    How about that responsive buttons via media queries. So you can target exactly when to break.

    <button href="/auth/facebook" class="btn btn-facebook"><i class="fa fa-facebook"></i> Mit Facebook <br class="only-mobile"/>anmelden</button>
    

    Then you just add this class:
    .only-mobile {
    display: none;
    @include media($break-md) {
    display: block;
    }
    }

    @include media is a bourbon mixin (behaves like a media query)

  17. Rajat jain
    Permalink to comment#

    This is a really really big line of code

    this code is not working……….

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