在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-width用作100。

默認情況下，如果我開始放置文本，則默認行為是DIV框將首先在寬度級別上增加大小，即首先將寬度從50增加到100，然后再開始增加高度。

我想知道我們是否可以更改訂單。 即首先按高度，然后按寬度。

即首先它應該從最小高度下降到最大高度。 一旦達到最大高度，就應該開始逐步增加寬度。

Answer 1

這樣做的原因是因為默認情況下，瀏覽器使用的CSS屬性是write-mode：horizo​​ntal-tb。 文本從左到右，然后從上到下填充框，這是我們在大多數西方世界中書寫單詞的方式。 如果將CSS更改為寫作模式：vertical-lr，則文本將從上到下，然后從左到右填充該框。 在這種情況下，您填充時會看到框達到其最大高度，然后開始增加寬度，直到達到極限。

另請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode