色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 文字豎行

錢瀠龍2年前13瀏覽0評論

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 文字豎行的方法,可以根據實際需要選擇適合的方式。