Button With Line Breaks

Your best bet is a <button> so you can use a <br> inside, like:

<button>
  Some
  <br>
  Text
</button>

If you need it to be an <input>, and thus the text has to be in a value, it used to be somewhat reliable to use &#x00A; (a carridge return) to break a line in a value like this:

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

That still works in Firefox, but doesn't seem to work in Chrome anymore, and is dangerous in Safari where it cuts off the text after the first entity.

See the Pen Line Breaks in Buttons by Chris Coyier (@chriscoyier) on CodePen.

Comments

  1. User Avatar
    Shilov Vlad [Omgovich]
    Permalink to comment#

    In last Opera (11.51) doesn’t work.

    • User Avatar
      adnan
      Permalink to comment#

      does it work on internet explorer?????

    • User Avatar
      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

    • User Avatar
      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. User Avatar
    Robert
    Permalink to comment#

    Doesen’t work on ipad either.

  3. User Avatar
    SerInformaticos
    Permalink to comment#

    Doesn’t work in Dolphin Mini Browser on Android

  4. User Avatar
    johndoe
    Permalink to comment#

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

    better solution.

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

    i think johndoe’s solutions is better..

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

    Tested and failed.

  8. User Avatar
    Joel Norman
    Permalink to comment#

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

    • User Avatar
      Inayath Khan
      Permalink to comment#

      This is working fine, you are FANTASTIC :)

    • User Avatar
      Tonio
      Permalink to comment#

      Thanks Joel !! Css is often the best solution :)

    • User Avatar
      Bhagwat Dk

      thnks Joel, ths is working………………….

    • User Avatar
      André
      Permalink to comment#

      That’s right, thank you Joel!

    • User Avatar
      Oscar Tini
      Permalink to comment#

      It works perfectly!

      You just set the width you want and the “white-space:normal;” does it’s thing;

      thumbs up Joel Norman!

    • User Avatar
      BanditoWalrus
      Permalink to comment#

      This is the only solution that actually works for me. Thanks!!

  9. User Avatar
    Pawan
    Permalink to comment#

    Nice Code. :)

  10. User Avatar
    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. User Avatar
    Alexey
    Permalink to comment#

    Thank you Joel! Works like a charm.

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

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

  14. User Avatar
    Mohamed Yahia
    Permalink to comment#

    i prefer to use css in this case :)

  15. User Avatar
    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. User Avatar
    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. User Avatar
    Rajat jain
    Permalink to comment#

    This is a really really big line of code

    this code is not working……….

  18. User Avatar
    mwl
    Permalink to comment#

    “white-space: normal;” only shows the first word in IOS9

  19. User Avatar
    mwl
    Permalink to comment#

    It work fine in Firefox, Safari and Chrome but not ios9

  20. User Avatar
    Merbin Joe
    Permalink to comment#

    Bad article, not working. Please remove this post

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag