CSS自動換行是一項非常常用和實用的技能。在網頁設計中，為了使網頁更加美觀，我們會使用各種按鈕來裝飾和優化頁面，而CSS自動換行就是其中之一。

button {
width: 100px;
height: 50px;
text-align: center;
background-color: #F5A623;
color: #fff;
font-size: 16px;
border: none;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

在上面的代碼中，我們可以看到使用了一些比較基礎的CSS屬性，包括了按鈕的寬度、高度、文本對齊方式、背景顏色、字體顏色、字體大小、邊框和圓角等。這些屬性的設定都是與普通的HTML按鈕基本一致的。

但是，與HTML按鈕不同的是，我們還設置了三個與自動換行相關的屬性：

• white-space: nowrap;
• overflow: hidden;
• text-overflow: ellipsis;

第一個屬性white-space: nowrap;的作用是防止文本換行。這樣，就能夠保證按鈕的文本不會被截斷，可以全部顯示出來。

第二個屬性overflow: hidden;的作用是隱藏溢出內容。這樣，就能夠讓文本在按鈕內部自動適應，不會超出按鈕的邊界。

第三個屬性text-overflow: ellipsis;的作用是在文本溢出的位置處顯示省略號。這樣，就能夠讓文本在過長的情況下，顯示一個更加美觀和簡潔的效果。

那么，這樣設定的按鈕在網頁中的效果將會是下面這個樣子：

<button>這是一個CSS自動換行的按鈕</button>

我們可以看到，按鈕中的文本全部顯示，并且沒有超出按鈕邊界，同時，過長的文本在溢出位置處也顯示了省略號，呈現了一個美觀和簡潔的效果。這樣，我們通過使用CSS自動換行，讓按鈕更加美觀和實用。