CSS排版技巧：從橫向到豎排

在CSS排版中，我們經常遇到需要將文本從橫向排列變?yōu)樨Q排排列的需求，這種排版在展示一些特殊內容，如新聞標題、產品名稱等時非常有用，下面是一些實現豎排排版的CSS技巧。

1、使用CSS的writing-mode屬性

CSS的writing-mode屬性用于設置文本的書寫方向，我們可以將writing-mode屬性設置為vertical-rl或vertical-lr，分別表示從右到左或從左到右的豎排排版。

.vertical-text {
  writing-mode: vertical-rl;
}

2、使用CSS的transform屬性

除了使用writing-mode屬性外，我們還可以使用transform屬性來實現文本的豎排排版，通過旋轉文本90度，我們可以將其從橫向排列變?yōu)樨Q排排列。

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

3、使用CSS的display屬性

我們還可以使用display屬性來設置文本的顯示方式，通過將display屬性設置為block或inline-block，我們可以將文本轉換為塊級元素或內聯塊級元素，從而實現豎排排版。

.vertical-text {
  display: block;
}

是一些實現豎排排版的CSS技巧，我們可以根據具體的需求和場景選擇適合的技巧來實現文本的豎排排版，也需要注意到不同瀏覽器對于CSS屬性的支持情況，以確保排版的兼容性和穩(wěn)定性。