javascript - 在 div 的情况下，如何先增加高度，然后增加宽度？

Question

.box {
  background-color: DarkSeaGreen;
  padding: 0px;
  margin: 0px;
  float: left;
  min-height: 50px;
  min-width: 50px;
  max-height: 100px;
  max-width: 100px;
}

<div class="box">
  ab cd ef gh ij kl mn
</div>

在上面的代码中，我们使用 min-height 和 min-width 为 50，max-height 和 max-宽度为100。

默认情况下，如果我开始放置文本，默认行为是 DIV 框将首先在宽度级别增加大小。首先它会将宽度从 50 增加到 100，然后开始增加高度。

我想知道我们是否可以更改订单。即首先按高度，然后按宽度。

即首先它应该从最小高度下降到最大高度。一旦达到最大高度，它应该开始增加宽度。

Answer 1

这是因为你的浏览器默认使用CSS属性writing-mode:horizo​​ntal-tb。文本从左到右、然后从上到下填充方框，这是我们在大多数西方世界书写单词的方式。如果将CSS更改为writing-mode:vertical-lr，文本将从上到下，然后从左到右填充框。在这种情况下，您会看到框达到其最大高度，然后开始增加宽度，直到达到限制。

另请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode