SOURCE

<table class="table-1">
  <tr>
    <th>值</th>
    <th>竖排文本</th>
    <th>横排文本（从左到右）</th>
    <th>横排文本（从右到左）</th>
    <th>混合文本</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994 年に至っては</span></td>
  </tr>
</table>


<div class="box-1">
    <div class="div-1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="div-2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>


<div class="box-2">
    <div class="text-1">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
    <div class="text-2">Knowing the directionality of text is important to web designers and authors, because right-to-left text can be more complicated (for beginners) to work with and the organization and directionality of the page layout are affected. Therefore, knowing the writing direction can be relevant to estimating the work involved to create web pages in a new language.</div>
</div>

.table-1,.table-1 td{
    border: 1px solid #ccc;
}
.table-1{
    border-collapse: collapse;
    border-spacing: 0;
}
.table-1 td{
    padding: 10px;
}
.example.Text1 span,
.example.Text1 {
  writing-mode: horizontal-tb;
}

.example.Text2 span,
.example.Text2 {
  writing-mode: vertical-lr;
}

.example.Text3 span,
.example.Text3 {
  writing-mode: vertical-rl;
}

.example.Text4 span,
.example.Text4 {
  writing-mode: sideways-lr;
}

.example.Text5 span,
.example.Text5 {
  writing-mode: sideways-rl;
}

.box-1{
    margin-top: 50px;
}
.box-1 .div-1{
    writing-mode: vertical-rl;
}
.box-1 .div-1 span{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #c00;
    color:#fff;
    font-size: 40px;
}