htmlの文字が縦書きになる

htmlは
<div class="ochawanpage">
<h1 class="ochawan-subtitle">
お茶碗
</h1>
</div>
<img src="./images/ochawan" alt>
</div>
cssは
.ochawanpage {
font-size: 50px;
font-family: "HannariMincho";
color: #212529;
margin-top: calc(5/1366 * 100vw);
margin-left: calc(233/1366 * 100vw);
}
というものを書いたのですが、「お茶碗」という言葉がなぜか縦書きになってしまいます。ある程度margin-leftの値が小さければ横向きなのですが、ある程度大きくなると勝手に縦書きになってしまいます。なぜでしょうか？

No.2 ベストアンサー 回答者： kantansi 回答日時： 2023/03/01 22:56

おそらく、縦書きになってしまう原因は、margin-leftの値が大きくなると、ブラウザが自動的にテキストを折り返して縦書き表示に切り替えてしまっているためだと思われます。

縦書きにならないようにするには、white-spaceプロパティを使って、テキストを強制的に横書き表示にすることができます。以下のようにCSSを追加してみてください。

css
Copy code
.ochawan-subtitle {
white-space: nowrap;
}
これにより、テキストが折り返されずに横書き表示されるようになります

No.1 回答者： fujillin 回答日時： 2023/03/01 22:44

こんばんは

全体像が不明なので、はっきりとはしませんけれど、

＞勝手に縦書きになってしまいます。なぜでしょうか？
わからないなりに想像するところ、「縦書き」ではなく、表示スペースが確保できなくて1文字ずつ折り返し改行表示されているだけではないでしょうか？
（結果的に、縦書きのように見えているだけ）

そのままのソースでも、ウィンドウ幅の大きなデバイスで閲覧すれば、横書き表示されるのではないでしょうか？
幅の狭いウィンドウでも改行をしたくなければ、CSSに
　white-space: nowrap;
を付け加えておくとか。