按鈕溢出隱藏不工作

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

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 example

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>