html - 向右移动文本，而不是在CSS中垂直滚动

我有一个高度为200px的div。我正在该div中显示一些数据。我想显示这样的数据：


  A E I B F J C G K D H L
  -----------------------------此高度为200px


我不要任何垂直滚动条。我的意思是，经过一定高度后，数据将向右移动并再次从顶部开始。


  我已经使用了column-count属性，但是它无法正常运行
  。


有人可以建议吗？

我的CSS看起来像这样：

.mydivclass {
    height: 200px;
    word-wrap:break-word;
    width: 100%;
    position: fixed;
    overflow:hidden;
    max-height:200px;
    top: 0;
    left: 0;
}

最佳答案

可以使用父级上的flexbox来完成

display: flex;
flex-direction: column;
flex-wrap: wrap;

例

.mydivclass {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  height: 200px;
  width: 0;
}

/* just some styling
  --------------------- */
.mydivclass * {
  width: 48px;
  height: 48px;

  border: 1px solid red;

  color: white;
  background: blue;
  text-align: center;
  line-height: 48px;
}

<div class="mydivclass ">

  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>

  <span>E</span>
  <span>F</span>
  <span>G</span>
  <span>H</span>

  <span>I</span>
  <span>J</span>
  <span>K</span>
  <span>L</span>

</div>

关于html - 向右移动文本，而不是在CSS中垂直滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43307822/