CSS 可以通過(guò)改變字體的排列方式,讓文字變成豎直方向的。在 CSS 中,可以使用writing-mode
屬性來(lái)控制文字的排列方向。下面是一個(gè)例子:
p { writing-mode: vertical-rl; }
上面的代碼會(huì)將文字從左到右垂直排列,也就是將每個(gè)字的底部對(duì)齊。如果想要實(shí)現(xiàn)從右到左的豎排文字,可以將屬性值改成 vertical-lr:
p { writing-mode: vertical-lr; }
豎排文字可能會(huì)導(dǎo)致一些排版上的問(wèn)題,比如在某些瀏覽器中會(huì)產(chǎn)生不必要的換行。為了解決這種問(wèn)題,可以使用 CSS 的writing-mode
屬性的另外一個(gè)值,即sideways-rl
或sideways-lr
來(lái)實(shí)現(xiàn)文字從上到下的排列,并且避免產(chǎn)生換行的問(wèn)題:
p { writing-mode: sideways-rl; white-space: nowrap; }
上面的代碼會(huì)將文字從上到下排列,并在標(biāo)簽的外部添加一種叫做white-space: nowrap
的屬性,防止文字換行。