按钮溢出隐藏不起作用答案

【问题标题】：Button overflow hidden not working按钮溢出隐藏不起作用
【发布时间】：2014-11-27 11:51:48
【问题描述】：

我有以下几点：

html:

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

css:

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

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

我确定我只是遗漏了一些明显的东西，但我无法弄清楚......

【问题讨论】：

标签： html css

【解决方案1】：

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

{
    white-space: nowrap;
}

编辑

现在，由于您试图隐藏溢出，我建议使用text-overflow: ellipsis; 来更好地查看文本剪切，在末尾添加一个 (...)：

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

&lt;button&gt;Here's a long chunk of text&lt;/button&gt;

【讨论】：

【解决方案2】：

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

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

&lt;button&gt;Here's a long chunk of text&lt;/button&gt;

【讨论】：

【解决方案3】：

添加white-space:nowrap;

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

【讨论】：

【解决方案4】：

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

word-wrap: word-wrap 属性允许将长单词打断并换行到下一行。

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

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

&lt;button&gt;Here's a long chunk of text&lt;/button&gt;

【讨论】：