按钮溢出隐藏不起作用

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>