html - 按钮溢出隐藏不起作用

Question

我有以下内容:

Fiddle link

html:

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

CSS:

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

基本上，我希望按钮不要换行..

我确定我只是遗漏了一些明显的东西，但我想不通...

Answer 1

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

{
    white-space: nowrap;
}

Updated Fiddle

编辑

现在，由于您正试图 overflow hidden ，我建议使用 text-overflow: ellipsis; 以更好地查看文本剪切，添加 (...)最后:

Another Updated Fiddle

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

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