CSS2是層疊樣式表的第二個(gè)版本,它加入了很多新的樣式屬性和功能,其中之一就是文字豎排顯示。
在CSS2中,我們可以通過(guò)writing-mode屬性來(lái)實(shí)現(xiàn)文字豎排顯示。此屬性有以下幾個(gè)取值:
/* 設(shè)置文字豎排顯示 */ writing-mode: vertical-rl; // 從上到下,從右到左 writing-mode: vertical-lr; // 從上到下,從左到右 writing-mode: horizontal-tb; // 從左到右,從上到下 writing-mode: tb-rl; // 從右到左,從上到下 writing-mode: tb-lr; // 從左到右,從下到上
其中,writing-mode: vertical-rl;代表文字從上到下排列,從右到左排列;writing-mode: vertical-lr;代表文字從上到下排列,從左到右排列。
除了writing-mode屬性,還可以使用text-orientation屬性來(lái)控制文字在豎向排列時(shí)的方向和傾斜角度。它有以下幾個(gè)取值:
/* 設(shè)置文字方向和傾斜角度 */ text-orientation: upright; // 垂直方向,不傾斜 text-orientation: sideways; // 垂直方向,逆時(shí)針旋轉(zhuǎn)90度 text-orientation: sideways-right; // 垂直方向,順時(shí)針旋轉(zhuǎn)90度
值得注意的是,文字豎排顯示只適用于一些特定的場(chǎng)景,例如書寫東亞字符、標(biāo)簽布局等。在其他場(chǎng)景下使用文字豎排顯示可能會(huì)影響用戶閱讀體驗(yàn),因此需要謹(jǐn)慎使用。