今天我們來學習如何用CSS寫出豎排文字。豎排文字是在一列中將文本垂直排列的一種方式，在一些特定場景下使用非常有用。接下來我們將會用一些簡單的代碼來展示如何實現豎排文字的效果。 首先我們需要將文本變為豎排。使用writing-mode CSS屬性可以實現這一效果。我們將其設置為 vertical-rl，表示垂直方向上從右向左排列。同時，也需要設置文本的排列方式為行內排列，即 display: inline；這樣便可將一整行的文本變為豎排。

p {
writing-mode: vertical-rl;
display: inline;
}

以上是實現豎排文字最基本的CSS代碼。但是，這樣的代碼只適用于單行文本。如果是多行文本，將會導致文本的排列混亂。為了解決這個問題，我們需要使用CSS的 line-height 屬性來設置每行文本的高度。同時，我們還需要將豎排文本包含在一個 div 中，設置 div 的高度，使每一行文本垂直排列而不會重疊。

第一行
第二行
第三行
.vertical-text {
height: 200px;
}
.vertical-text p {
writing-mode: vertical-rl;
display: inline;
line-height: 1.5em;
}

在以上代碼中，我們將豎排文本包含在一個 div 中，并將 div 的高度設置為 200px。同時，p 標簽的 line-height 設置為 1.5em，表示每行文本的高度為字體的 1.5 倍。這樣我們就可以實現多行豎排的效果了。 除了以上方式，我們還可以使用CSS3的 transform 屬性來實現豎排文字，如下所示：

.vertical-text {
transform: rotate(-90deg);
}
.vertical-text p {
display: inline;
}

以上代碼將 div 順時針旋轉90度，達到豎排效果。但是，這種方式會導致豎排文本會占用過多的寬度，要注意調整父元素的寬度使其不會影響到頁面的布局。 以上是 CSS 實現豎排文字的幾種常用方式。我們可以根據實際場景選擇相應的方式來實現豎排效果。希望這篇文章能夠對你有所幫助。