垂直文本，在 CSS 中带有水平字母

通过指定 text-orientation: upright 和 writing-mode: vertical-rl，我们可以用水平 CSS 显示垂直文本。

语法

CSS writing-mode 和 text-orientation 属性的语法如下：

Selector {
   writing-mode: /*value*/
   text-orientation: /*value*/
}

示例

以下示例说明了 CSS 轮廓偏移属性。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h4 {
            text-orientation: upright;
            writing-mode: vertical-rl;
            line-height: 3;
            box-shadow: inset 0 0 3px khaki;
         }
      </style>
   </head>
   <body>
      <h4>Sed nec tortor</h4>
   </body>
</html>

这给出了以下输出

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            display: flex;
            flex: 1;
         }
         p {
            text-orientation: upright;
            writing-mode: vertical-rl;
            line-height: 3;
            box-shadow: inset 0 0 13px orange;
         }
      </style>
   </head>
   <body>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
   </body>
</html>

这给出了以下输出

基础教程