我們在編寫網頁時，經常需要使用 CSS 樣式來美化頁面，其中一種比較常見的樣式就是將文字豎著排列。那么，我們該如何實現這個效果呢？

.vertical-text{
writing-mode: vertical-rl; /*使文字豎排*/
text-orientation: mixed; /*允許文字在豎排時存在橫向，否則會自動變成縱向*/
transform: rotate(180deg); /*將文字翻轉180度*/
white-space: nowrap; /*不允許文字換行*/
width: 1em; /*固定寬度防止元素超出父元素*/
 }

上述代碼中，我們使用了writing-mode屬性來實現文字豎排。其中，vertical-rl代表從右向左豎排，常用的還有vertical-lr，代表從左向右豎排。

但是，如果光使用writing-mode屬性，我們會發現豎排的文字會出現橫向傾斜的情況。這時，我們需要添加text-orientation: mixed屬性來解決這一問題。

接著，我們需要將豎排的文字進行翻轉，否則文字將倒過來寫。我們通過使用transform屬性，將文字沿中心軸翻轉 180 度解決了這一問題。

此外，我們還需要添加white-space: nowrap屬性防止文字自動換行，以及將元素寬度固定在 1em 左右來防止元素超出父元素范圍。

通過上述 CSS 代碼，我們就可以輕松實現文字的豎排效果啦！