[分享]css3控制竖排文字

在CSS3中，我们可以通过writingmode属性来控制竖排文字。/ 将文字竖排 / writingmode: verticalrl; 上面的代码表示将文字从左到右竖排。/ 将文字从右到左竖排 / ...

在CSS3中，我们可以通过writing-mode属性来控制竖排文字。

/* 将文字竖排 */
writing-mode: vertical-rl; 

上面的代码表示将文字从左到右竖排。

/* 将文字从右到左竖排 */
writing-mode: vertical-lr; 

上面的代码表示将文字从右到左竖排。

同时，我们还可以通过text-orientation属性来控制文字方向。

/* 将文字逆时针旋转90度 */
text-orientation: upright;
transform: rotate(270deg); 

上面的代码表示将文字逆时针旋转90度。

/* 将文字顺时针旋转90度 */
text-orientation: sideways;
transform: rotate(90deg); 

上面的代码表示将文字顺时针旋转90度。

除了writing-mode和text-orientation属性，我们还可以使用unicode-bidi和direction属性来控制竖排文字。

/* 设置文字从右到左书写 */
unicode-bidi: bidi-override;
direction: rtl; 

上面的代码表示将文字从右到左竖排。

/* 设置文字从左到右书写 */
unicode-bidi: bidi-override;
direction: ltr; 

上面的代码表示将文字从左到右竖排。