CSS3 字體垂直顯示功能讓我們能夠輕松地使文本朝向橫向或縱向排列。該特性不僅適用于中文、英文等常見語言,也適用于日語、韓語等豎排文字。
/* 將文本垂直排列 */ .vertical-text { writing-mode: vertical-rl; text-orientation: upright; }
以上代碼可以將文本垂直排列,其中writing-mode: vertical-rl
表示從右往左垂直排列,text-orientation: upright
表示文字正立顯示。
另外,也可以將橫向文字旋轉90度來實現垂直排列:
/* 將橫向文本旋轉90度垂直顯示 */ .vertical-text { transform: rotate(-90deg); transform-origin: top left; }
以上代碼可以將橫向文字旋轉90度,transform-origin: top left;
表示選擇旋轉中心點為元素左上角。
當然,還有其他一些與垂直顯示相關的CSS屬性,例如text-combine-upright
可以將多個行內元素合并為一個單元格。
總的來說,CSS3 字體垂直顯示功能為我們提供了更加豐富的排版選擇,幫助我們實現更好的用戶體驗。
上一篇css3如何規定y軸