在編寫網頁時，我們經常需要使用 CSS 來美化頁面的樣式。其中，超出部分的處理便是一項重要的技能。當一個元素的內容或圖片超出其容器時，我們可以使用 CSS 中的省略屬性進行處理。

在 CSS 中，可以通過 text-overflow 屬性來控制文本的省略形式。text-overflow 屬性需要與 overflow 屬性配合使用才能生效，且只能作用于單行文本。

例如：
<style>
.container {
width: 200px;
height: 50px;
border: 1px solid #000;
overflow: hidden; /* 控制超出部分隱藏 */
text-overflow: ellipsis; /* 使用省略號代替超出部分 */
white-space: nowrap; /* 超出部分不換行 */
}
</style>
<div class="container">
這是一道很長的文本內容，它將超出容器的寬度。
</div>

在上述例子中，text-overflow 屬性設置為 ellipsis 后，超出部分將被省略，并以省略號顯示。而 white-space 屬性則可以控制超出部分不自動換行，保持內容的一行顯示。此外，overflow 屬性設置為 hidden 后，超出部分被隱藏起來。

對于圖片，我們也可以使用 object-fit 和 object-position 屬性來控制其省略形式。object-fit 屬性可用于填充圖片容器，同時控制圖片的縮放方式，并且可以使用 contain、cover、fill、none、scale-down 等值來設置。而 object-position 屬性可以設置圖片相對于容器的位置。

例如：
<style>
.container {
width: 200px;
height: 150px;
border: 1px solid #000;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover; /* 填充容器并保持圖片比例不變 */
object-position: center; /* 圖片居中顯示 */
}
</style>
<div class="container">
<img src="example.jpg" alt="示例圖片">
</div>

在上述例子中，object-fit 屬性設置為 cover 后，圖片將會被完整地填充到容器中，并且保持其比例不變；而 object-position 屬性設置為 center 后，圖片將會居中顯示。

通過以上的實例，我們可以清晰地了解到 CSS 中處理超出部分的省略方式，它們將為我們的頁面美化和設計提供更多的選擇和靈感。