CSS字間距是調整字母之間的間距，可以用來美化文本內容，更好地展示信息。在設計網站布局時，我們常常會遇到字間距自適應寬度的問題：如何讓文字的字間距隨著父元素寬度的變化而自動適應？

下面是一個例子，我們將在一個固定寬度的父元素中放置一個標題欄，并使用CSS控制標題文字的字間距，如何讓這個標題欄隨著父元素的寬度自適應呢？

<div class="parent-div">
<h1 class="title">This is a title</h1>
</div>
<style>
.parent-div {
width: 500px;
background-color: #eee;
}
.title {
font-size: 3rem;
letter-spacing: 0.1em;
}
</style>

首先，我們需要將標題欄的寬度設置為父元素的百分比，使其能夠相對于父元素自適應。

.title {
font-size: 3rem;
letter-spacing: 0.1em;
width: 100%;
}

但是，此時標題欄文字的字間距仍然和原始寬度相同，沒有實現自適應。因此，我們需要使用CSS的calc()函數結合媒體查詢來動態計算字間距。

.title {
font-size: 3rem;
letter-spacing: calc(0.1em + (100vw - 500px) / 100);
width: 100%;
}
@media screen and (max-width: 500px) {
.title {
letter-spacing: 0.1em;
}
}

在上面的代碼中，我們首先將字間距的初始值設為0.1em，然后使用calc()函數計算真正的字間距值。其中，100vw是視口寬度，500px是父元素的寬度，計算得出的值在原有基礎上每增加1vw，字間距就會增加0.01em。這樣，在父元素寬度變化時，字間距就會動態調整。

同時，為了避免在寬度過小時文字溢出，我們使用媒體查詢來限制最小寬度，字間距恢復為初始值。

@media screen and (max-width: 500px) {
.title {
letter-spacing: 0.1em;
}
}

使用上述方法，我們就可以讓CSS字間距自適應寬度，美化網站文本內容，并適應不同設備的屏幕大小。