CSS是網頁設計中必不可少的一個元素。其中一個很好的用法是可以幫助我們將不同寬度的內容以不同的方式顯示。在該段落中，我們將討論如何使用CSS來實現這個目標。

首先，我們需要設置一個基礎的布局。例如，我們可以讓左側有一個較寬的內容區域，右側有較窄的側邊欄。我們可以使用以下CSS代碼來完成這個布局：

.container {
display: flex;
}
.content {
flex-grow: 1;
}
.sidebar {
width: 200px;
}

在這個示例中，我們使用了CSS的flexbox布局來分配內容。包括一個父元素“container”，其中包括一個內容區域“content”和一個側邊欄“sidebar”。使用flex-grow屬性，我們可以使內容區域填滿剩余的空間。

現在我們可以根據內容的寬度來調整它的顯示方式。假設我們在內容區域中有一個較窄的圖像，但我們希望它占據較寬的空間。我們可以使用以下CSS代碼：

img {
width: 100%;
}

這個代碼塊將在所有空間內保持圖像的比例，確保它始終填滿了其父元素的寬度。

相反，如果我們想讓一個較寬的段落適應較窄的空間，我們可以使用以下CSS代碼：

p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

這個代碼塊將保持段落的原始寬度，但將文本內容截斷為省略號。我們還可以使用CSS規則來添加滾動條，這將允許用戶在段落中瀏覽寬度超過其父元素。

總之，在設計網頁時，我們通常需要處理各種不同寬度的內容。了解如何使用CSS來調整內容的顯示方式可以幫助我們更好地組織不同的元素，以優化我們的設計。