阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS writing-mode

      CSS writing-mode

      表格中展示了不同的书写模式:

      <!DOCTYPE html>

      阿西河教程(axihe.com)
      valueVertical scriptHorizontal scriptMixed script
      horizontal-tb我家没有电脑。Example text1994年に至っては
      vertical-lr我家没有电脑。Example text1994年に至っては
      vertical-rl我家没有电脑。Example text1994年に至っては
      sideways-lr我家没有电脑。Example text1994年に至っては
      sideways-rl我家没有电脑。Example text1994年に至っては

      代码如下:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>阿西河教程(axihe.com)</title>
      <style>
          table, td, th {
              border: 1px solid black;
          }
      
          table {
              border-collapse: collapse;
              width: 100%;
          }
          .example.Text1 span, .example.Text1 {
          writing-mode: horizontal-tb;
          -webkit-writing-mode: horizontal-tb;
          -ms-writing-mode: horizontal-tb;
          }
      
          .example.Text2 span, .example.Text2 {
          writing-mode: vertical-lr;
          -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: vertical-lr;
          }
      
          .example.Text3 span, .example.Text3 {
          writing-mode: vertical-rl;
          -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: vertical-rl;
          }
      
          .example.Text4 span, .example.Text4 {
          writing-mode: sideways-lr;
          -webkit-writing-mode: sideways-lr;
          -ms-writing-mode: sideways-lr;
          }
      
          .example.Text5 span, .example.Text5 {
          writing-mode: sideways-rl;
          -webkit-writing-mode: sideways-rl;
          -ms-writing-mode: sideways-rl;
          }
      </style>
      </head>
      <body>
      <table>
          <tr>
              <th>value</th>
              <th>Vertical script</th>
              <th>Horizontal script</th>
              <th>Mixed script</th>
          </tr>
          <tr>
              <td>horizontal-tb</td>
              <td class="example Text1"><span>我家没有电脑。</span></td>
              <td class="example Text1"><span>Example text</span></td>
              <td class="example Text1"><span>1994年に至っては</span></td>
          </tr>
          <tr>
              <td>vertical-lr</td>
              <td class="example Text2"><span>我家没有电脑。</span></td>
              <td class="example Text2"><span>Example text</span></td>
              <td class="example Text2"><span>1994年に至っては</span></td>
          </tr>
          <tr>
              <td>vertical-rl</td>
              <td class="example Text3"><span>我家没有电脑。</span></td>
              <td class="example Text3"><span>Example text</span></td>
              <td class="example Text3"><span>1994年に至っては</span></td>
          </tr>
          <tr>
              <td>sideways-lr</td>
              <td class="example Text4"><span>我家没有电脑。</span></td>
              <td class="example Text4"><span>Example text</span></td>
              <td class="example Text4"><span>1994年に至っては</span></td>
          </tr>
          <tr>
              <td>sideways-rl</td>
              <td class="example Text5"><span>我家没有电脑。</span></td>
              <td class="example Text5"><span>Example text</span></td>
              <td class="example Text5"><span>1994年に至っては</span></td>
          </tr>
      </table>
      </body>
      </html>
      

      属性定义及使用说明

      writing-mode 属性定义了文本在水平或垂直方向上如何排布。

      语法格式如下:

      writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
      
      • horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
      • vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
      • vertical-lr:垂直方向内内容从上到下,水平方向从左到右
      • sideways-rl:内容垂直方向从上到下排列
      • sideways-lr:内容垂直方向从下到上排列

      浏览器支持

      表格中的数字表示支持该属性的第一个浏览器版本号。

      属性IEChromeFFsafariOpen
      writing-mode8.06.041.05.115
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录