在網頁設計中，經常遇到需要根據文本內容來調整元素寬度的情況。使用CSS可以輕松實現這個目標。

一個常見的應用場景是制作標題欄。標題欄需要根據內容長度來動態調整自身寬度。

.title {
display: inline-block;
padding: 5px 10px;
font-size: 18px;
font-weight: bold;
/* 根據文本內容設置min-width和max-width */
min-width: 100px;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

上面的代碼中，使用了display: inline-block將元素設置為內聯塊級元素，可以讓元素自適應寬度，不會獨占一行。同時設置padding為5px 10px，使元素有一定的內邊距，增加美觀性。

接下來的min-width和max-width分別設置最小和最大寬度。這兩個屬性可以讓元素根據文本內容自適應調整寬度，避免了過長或過短的寬度給頁面造成影響。

注意到white-space設為nowrap，這是為了防止文本內容換行，保持標題欄的單行顯示。overflow和text-overflow兩個屬性可以讓文本內容超出區域顯示省略號，更加美觀實用。

以上代碼僅僅是一個示例，實際使用中可以根據具體需求來調整屬性值。通過這種方式，CSS可以非常靈活地根據文本內容來調整元素寬度，讓網頁設計更加美觀、實用。