CSS是一種能夠使HTML頁面變得更加美觀和有趣的技術。它們不僅可以改變文本和圖像的樣式，還可以改變它們的排列方式。讓我們來看一下如何使用CSS創造一個豎列顯示的文本。

/* 在CSS中做準備工作 */
.vertical_text {
writing-mode: vertical-lr;  /* 設置文本方向為豎直 */
text-orientation: upright;  /* 確保文本朝上 */
white-space: nowrap;  /* 禁止自動換行 */
font-size: 20px;  /* 設置字體大小 */
font-weight: bold;  /* 設置字體粗細 */
}

現在我們已經預處理好CSS文件了，現在我們可以在HTML文件中創建一個div來包裹我們的文本。

<div class="vertical_text">
此處為你所想要豎列顯示的文本。
</div>

現在，這段代碼已經可以將文本豎列顯示。但是，它們仍然按照它們原來的順序排列。我們可以使用旋轉來讓它們呈現90度偏移的效果。

.vertical_text span:nth-child(1) {  /* 改變第一個子元素的角度 */
transform: rotate(90deg);     
}
.vertical_text span:nth-child(2) {  /* 改變第二個子元素的角度 */
transform: rotate(180deg);     
}
.vertical_text span:nth-child(3) {  /* 改變第三個子元素的角度 */
transform: rotate(270deg);     
}

這樣我們的文本就可以豎列顯示了！

總結:

CSS是一種很有用的技術，能夠讓我們改變HTML的排列和樣式。本文主要是介紹了如何使用CSS來讓文本豎列顯示。重點是使用writing-mode屬性和rotate()方法。你可以在你的項目中使用這個技巧，讓你的網站更加獨特和有趣。