很多時候，我們需要在網頁中使用文字豎直方向的排版。這在中文和日文網站尤其常見。那么，在 CSS 中如何實現文字豎直排版呢？下面就來詳細講解。

/* 首先，我們需要使用 writing-mode 屬性來指定文字的豎直排版方式 */
.vertical-text {
writing-mode: vertical-rl;  /* 從右向左垂直排版 */
}
/* 對于日文等需要從上往下排版的，可以使用 vertical-lr 值 */
.japanese-text {
writing-mode: vertical-lr;  /* 從上向下垂直排版 */
}
/* 接著，需要注意文字的旋轉方向，默認情況下文字是平行于 x 軸的，因此還需要將其旋轉90度 */
.vertical-text, .japanese-text {
transform: rotate(-90deg);
}
/* 注意，文字豎直排版會導致寬高互換，因此需要用到 width 和 height 屬性 */
.vertical-text, .japanese-text {
width: 1em;
height: 3em;
}

上述代碼中，我們使用了 writing-mode 屬性來指定文字的豎直排版方式，分別為 vertical-rl 和 vertical-lr。接著，使用 transform 屬性將文字旋轉90度，使其能夠沿著 y 軸排列。最后，需要用 width 和 height 屬性將寬高進行調整，以避免文字錯位。

除了以上方法，還可以使用 text-orientation 屬性來實現文字的豎直排版。該屬性可以指定文字相對于塊級元素的方向，但是其瀏覽器兼容性相對較差，因此建議使用 writing-mode 屬性。