在進行網頁設計的過程中，我們可以用CSS來控制文本的外觀，包括其顏色、字體、大小、粗細等等。但是有時候，我們會遇到一些奇怪的問題，比如文字被覆蓋了，這是什么原因造成的呢？

.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
text-align: center;
color: white;
font-size: 30px;
}

以上是一個樣式代碼片段，在整個頁面上，我們希望將一句話放在中心位置，并且設置了一些字體樣式。但是當我們看到效果時，文字被覆蓋了，這是因為我們在CSS中設置了文字位置為絕對定位，并且將其上下左右都設置了50%，導致文字出現了重疊。

如何解決這個問題呢？有兩種方法：

1. 修改樣式

.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-size: 30px;
}

我們將寬度和高度去掉，并且將它們的位置自適應為文字的大小，這樣就不會有文字重疊的問題了。

2. 修改HTML結構

<div class="wrapper">
<div class="text">Example Text</div>
</div>

我們可以添加一個包裝器，將文字放在里面，并且通過包裝器來控制其寬度和高度，這樣就不會有文字重疊的問題了。

無論哪種方法，都能輕松解決CSS文字重疊的問題，讓我們的網頁設計更加完美。