CSS中可以通過transform屬性實現讓文字豎著排列。
首先,需要設置文字排列方向為從上到下,可以使用writing-mode屬性,值為tb-rl,表示top to bottom and right to left。
p { writing-mode: tb-rl; }
然后需要讓文字從左側開始排列,可以通過設置transform-origin屬性的值為左側中心點。
p { writing-mode: tb-rl; transform-origin: left center; }
接著,需要將文字旋轉90度,可以使用rotate()函數。
p { writing-mode: tb-rl; transform-origin: left center; transform: rotate(90deg); }
最終,文字就可以豎著排列了。
需要注意的是,文字豎著排列時,如果寬度超過元素寬度,將會自動換行。可以通過設置white-space屬性為nowrap來禁止自動換行。
p { writing-mode: tb-rl; transform-origin: left center; transform: rotate(90deg); white-space: nowrap; }
另外,需要注意瀏覽器的兼容性,一些舊版本瀏覽器可能不支持writing-mode和transform屬性。
下一篇css文字對齊圖片底部