CODEWITHSUNDEEP
htmlcss
Rob
Rob

Reputation: 2110

Button overflow hidden not working

I have the following:

enter image description here

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

Upvotes: 4

Views: 15592

Answers (4)

LcSalazar
LcSalazar

Reputation: 16821

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>

Upvotes: 12

alessandrio
alessandrio

Reputation: 4370

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>

Upvotes: 2

j08691
j08691

Reputation: 207891

Add white-space:nowrap;

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

jsFiddle example

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

You can use white-space: nowrap;:

button {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
}
<button>Here's a long chunk of text</button>

Upvotes: 5

Related Questions