按钮溢出隐藏不起作用

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> 

Answer 3

Add white-space:nowrap;

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

jsFiddle example

Answer 4

add white-space: nowrap; and word-wrap: normal;

word-wrap: The word-wrap property allows long words to be able to be broken and wrap onto the next line.

white-space: The white-space property specifies how white-space inside an element is handled.

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

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