本文目錄導(dǎo)讀：

1. 使用CSS的writing-mode屬性
2. 使用CSS的transform屬性

CSS實(shí)現(xiàn)文字豎排排版

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要實(shí)現(xiàn)文字的豎排排版，尤其是在展示一些古典詩詞或者特定風(fēng)格的設(shè)計(jì)時(shí)，雖然HTML本身并不直接支持文字豎排，但是我們可以借助CSS（層疊樣式表）來實(shí)現(xiàn)這一效果。

使用CSS的writing-mode屬性

CSS的writing-mode屬性可以用來改變文本的書寫方向，我們可以使用這個(gè)屬性來實(shí)現(xiàn)文字的豎排排版。

p {
  writing-mode: vertical-rl; /* 從右到左垂直書寫 */
  text-orientation: upright; /* 文字方向正常，即垂直向上 */
  height: auto; /* 高度自適應(yīng)內(nèi)容 */
}

代碼將使段落<p>標(biāo)簽內(nèi)的文字以豎排形式展示，writing-mode屬性的vertical-rl值表示文本從右到左垂直書寫，而text-orientation的upright值則保證文字方向正常向上，設(shè)置高度為auto以適應(yīng)內(nèi)容。

使用CSS的transform屬性

除了使用writing-mode屬性，我們還可以利用CSS的transform屬性來實(shí)現(xiàn)文字的豎排效果。

p {
  transform: rotate(90deg); /* 將文本旋轉(zhuǎn)90度以實(shí)現(xiàn)豎排效果 */
  writing-mode: lr-tb; /* 設(shè)置從左到右橫向書寫，從上到下縱向排列 */
  white-space: nowrap; /* 防止文字換行 */
}

代碼通過旋轉(zhuǎn)文本90度來實(shí)現(xiàn)豎排效果，同時(shí)設(shè)置writing-mode屬性以確保文本的橫向書寫順序和縱向排列順序符合我們的需求，white-space屬性的nowrap值則防止文字自動(dòng)換行，需要注意的是，這種方法可能會(huì)導(dǎo)致文本在某些情況下無法完全顯示或出現(xiàn)溢出的情況，需要進(jìn)行適當(dāng)?shù)恼{(diào)整。

就是兩種常見的使用CSS實(shí)現(xiàn)文字豎排排版的方法，可以根據(jù)具體需求和場景選擇合適的方法，要注意調(diào)整其他樣式屬性以確保文本的顯示效果符合預(yù)期。