CSS 是一個強大的前端開發工具，它可以讓我們對網頁布局、樣式進行更精細的掌控，包括文字排列方式。

當我們需要將字體豎直排列時，可以使用 CSS transform 屬性中的 rotate() 函數，如下所示：

.vertical-text {
transform: rotate(-90deg);
transform-origin: top left;
}

在這段 CSS 代碼中，我們使用了 rotate() 函數，對字體進行了逆時針旋轉 90 度的操作，使其變成豎直排列方式。另外，我們還設置了 transform-origin 的屬性值為 top left，使字體的起始點位于垂直方向的頂部。

使用這個 CSS 樣式類，我們可以將需要豎直排列的文字添加 .vertical-text 樣式，如下所示：

<p class="vertical-text">縱向排列的文字</p>

通過這樣的方式，我們就可以輕松地實現文字的豎直排列，可以用于頁眉、頁腳、側邊欄等不同的展示區域，讓網頁設計更加生動有趣。