ChineseTest

by benedict_chan

HTML

<div class="container">
  <div class="column">
    <div class="chinese-text">第一行</div>
    <div class="chinese-text">第二行</div>
    <div class="chinese-text">第三行</div>
  </div>
  <div class="column">
    <div class="chinese-text">第四行</div>
    <div class="chinese-text">第五行</div>
    <div class="chinese-text">第六行</div>
  </div>
  <div class="column">
    <div class="chinese-text">第七行</div>
    <div class="chinese-text">第八行</div>
    <div class="chinese-text">第九行</div>
  </div>
</div>

CSS

.container {
  min-width: 300px;
  min-height: 300px;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid black;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 5px;
}

.chinese-text {
  font-family: Arial, sans-serif;
  font-size: 4vw;
  font-weight: bold;
  color: black;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin: 0 0 5px 0;
}

@media screen and (min-width: 768px) {
  .chinese-text {
    font-size: 24px;
  }
}