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

在CSS中，我們可以使用writing-mode屬性來(lái)實(shí)現(xiàn)文字豎排，writing-mode屬性定義了文本在元素中的排列方式。

1、創(chuàng)建一個(gè)HTML元素，例如一個(gè)段落（p）或一個(gè)標(biāo)題（h1）。

2、在該元素的樣式中應(yīng)用writing-mode屬性，并將其值設(shè)置為vertical-rl或vertical-lr，分別表示從右到左或從左到右的豎排文本。

3、如果需要，可以使用transform屬性來(lái)旋轉(zhuǎn)文本，以便更好地適應(yīng)豎排布局。

以下是一個(gè)示例代碼：

HTML:

<p class="vertical-text">這是一段豎排文本。</p>

CSS:

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

在這個(gè)示例中，我們將段落（p）的樣式類(lèi)設(shè)置為vertical-text，并將writing-mode屬性設(shè)置為vertical-rl，表示文本將從右到左豎排排列，我們還使用了transform屬性將文本旋轉(zhuǎn)180度，以便文本從下到上排列。

writing-mode和transform屬性的瀏覽器支持可能因?yàn)g覽器而異，在實(shí)際應(yīng)用中，請(qǐng)確保在多種瀏覽器中進(jìn)行測(cè)試以確保兼容性。