text-orientation与垂直排版文字方向控制实例页面

展示

代码

• HTML：

  <h4>默认</h4>
  <p>CSS新世界</p>
  <h4>text-orientation:upright</h4>
  <p class="upright">CSS新世界</p>
  <h4>text-orientation:sideways</h4>
  <p class="sideways">CSS新世界</p>

• CSS：

  p {
      font-size: 200%;
      writing-mode: vertical-rl;
  }
  .upright {
      -webkit-text-orientation: upright;
      text-orientation: upright;
  }
  .sideways {
      -webkit-text-orientation: sideways;
      text-orientation: sideways;
  }