Button overflow hidden not working

Question

I have the following:

Fiddle link

html:

<button>Here's a long chunk of text</button>

css:

button {
   width: 80px;
   overflow: hidden;
}

Basically, I want the button not to wrap the text..

I'm sure I'm just missing something obvious, but I can't figure it out...

Answer 1

Add the following style to prevent line breaks:

{
    white-space: nowrap;
}

Updated Fiddle

EDIT

Now, since you're trying to hide the overflow, I'd suggest to use text-overflow: ellipsis; to give better looks to the text cut, adding a (...) at the end:

Another Updated Fiddle

button {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<button>Here's a long chunk of text</button>

Answer 2

You can use white-space: nowrap;:

button {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
}

<button>Here's a long chunk of text</button>