按钮溢出隐藏不起作用

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

修改

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

Another Updated Fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

添加white-space:nowrap;

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

<强> jsFiddle example

Answer 4

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;