按钮溢出隐藏不起作用

Question

我有以下内容：

小提琴链接

HTML：

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

CSS：

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

基本上，我希望按钮不包装文本..

我敢肯定我只是遗漏了一些明显的东西，但我无法弄明白......

Answer 1

添加以下样式以防止换行：

{
    white-space: nowrap;
}

更新小提琴

编辑

现在，既然你试图隐藏溢出，我建议使用text-overflow: ellipsis; 为文本剪切提供更好的外观，最后添加一个（...）：

另一个更新的小提琴

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

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

Answer 2

你可以使用white-space: nowrap; ：

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

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

Answer 3

添加white-space:nowrap;

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

jsFiddle例子

Answer 4

添加white-space: nowrap; 和word-wrap: normal;

word-wrap:自动换行属性允许长单词被打破并换行到下一行。

white-space: white-space属性指定如何处理元素内的空白。

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

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