CSS 文字豎行,指的是將文本排列成垂直方向的文字,常常用于設計各種識別牌、營業牌等等。
實現 CSS 文字豎行有多種方式,下面介紹兩種較為常用的方法。
/*方式一:使用writing-mode屬性*/ div { writing-mode: vertical-rl;/*vertical-rl表示垂直書寫,horizontal-tb表示水平書寫*/ text-orientation: upright;/*文字方向*/ width: 50px; height: 150px; }
上述代碼使用了writing-mode屬性,通過設置為vertical-rl,實現了將文本豎著排列。text-orientation屬性用于設置文字方向,upright表示文字在正常情況下豎直排列。
/*方式二:使用transform屬性*/ div { width: 50px; height: 150px; } div p { transform: rotate(-90deg);/*旋轉-90度*/ transform-origin: bottom left;/*旋轉中心點*/ display: inline-block; }
上述代碼使用了transform屬性,通過將p元素旋轉-90度,實現了將文本豎著排列。注意,div元素需要設置寬度、高度,p元素需要設置display:inline-block,使得其寬度與高度自適應。
以上便是兩種實現 CSS 文字豎行的方法,可以根據實際需要選擇適合的方式。
上一篇css 文字移動動畫