在網頁設計中，很多時候都需要設置元素的寬度以便讓它們能夠在頁面中適當地排列。但是當文本或圖片內容超過了所設置的寬度時，我們該如何處理呢？這時候就需要用到CSS中的超出寬度設置。

當一個元素的內容超出了它所設置的寬度，可以通過CSS中的overflow屬性來控制元素的顯示方式。該屬性有三種可選值：

overflow: visible;  // 默認值，內容溢出元素邊界顯示
overflow: hidden;  // 內容溢出元素邊界不顯示，相當于裁剪
overflow: scroll;  // 內容溢出元素邊界時顯示滾動條

例如，我們有一個DIV元素，寬度為300px，里面有一張寬度為400px的圖片：

<div style="width:300px;">
<img src="example.jpg" style="width:400px;" />
</div>

此時，圖片的寬度超過了DIV元素的寬度，導致圖片被擠壓變形。為了解決這個問題，我們可以在CSS中添加超出寬度設置：

div {
width: 300px;
overflow: hidden;  // 超出寬度隱藏
}
img {
width: 400px;
}

這樣，當圖片的寬度超過了DIV元素的寬度時，圖片就不再超出邊界，而是被隱藏在元素內部，避免了變形問題。

除了以上三種基本設置之外，overflow屬性還有兩個可選值：auto和inherit。auto表示自動根據內容的大小進行顯示或滾動條顯示；inherit表示繼承父元素的overflow屬性。

超出寬度的設置在網頁設計中是非常常用的，它可以有效地控制頁面元素的布局和顯示效果。合理地使用超出寬度設置可以讓網頁達到更好的效果和用戶體驗。