情境

在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。
我相信我們的讀者一定也很能夠舉一反三，既然固定高度下，內容過長有可能會溢出，那換個方向來看，寬度固定的話是不是也會有同樣的問題呢？

當然回答是肯定的，我們接下來試著想想看，我們生活中常見的一些可能因為固定寬度造成內容溢出的情境。

你能看見多遠的未來呢？

是否我們曾經看過或設計過 button 元件，並且為了符合設計稿而給他一個固定寬度，例如：

.button {
  width: 100px;
}

在一般情況下可能會安然無恙：

不過當內容變長的時候，可能會不預期的換行：

或者，如果你有先設置文字不換行的話，會造成內容太長而左右溢出：

但是以上圖為例，不管是不預期的換行或左右內容溢出，畫面上看起來都相當悽慘。

再舉另外一個例子，今天如果我們有一個固定長度的下拉選單按鈕：

.dropdown-button {
  width: 200px;
}

當我們選擇內容較短的選項時，按鈕上的文字是正常顯示：

但是當我們選擇較長內容的選項時，若這個按鈕是固定長度，很有可能發生寬度不足而內容溢出：

考慮使用 min-width 取代 width

考慮使用 min-width 取代 width 可以讓元件能夠有更好的彈性來適應不定長度的內容：

.button {
  min-width: 100px;
}

當我們選擇較長內容時，顯示區域也能夠自動伸長：

.dropdown-button {
  min-width: 200px;
}

小結

除了直向的內容過長問題之外，同樣的也不能忽略左右方向內容過長的溢出。特別是像這次舉例的下拉選單，如果我們的選項都沒有過長的內容，當然我們可能近期不會發生問題，所以我們也不會留意到可能有這樣的問題。

可是當問題意外發生的時候，很有可能他出現的地方不是在測試機上，而是在產品機上。被使用者發現這樣的破版介面，真的會讓我們的產品形象大打折扣。