overflow: scroll;なのにスマホで改行される。

Question

(↓ WordPress カスタムHTML記入)

<pre><code>
 WordPressWordPressWordPressWordPressWordPressWordPress
</code></pre>

(↓ style.CSS)

pre code{
 (省略)
overflow: scroll;
white-space:pre;  /*うまくいかなかったので、テーマに追加してみた*/
}

デベロッパーツールで確認すると、PCサイズ画面もスマホサイズ画面もスクロールする事が確認できているのに、
投稿して実際のスマホで確認すると、スクロールされずに改行されています。

その後に

</head>の直前に<style>pre code{ white-space:pre; } </style>と書いてみたりしましたがダメでした。

バズ部さんの、『 XeoryBase 』を使用しています。

---

スマホ画面でスクロールにしたいです。
情報不足かもしれませんが、よろしくお願いいたします。

Comments

[Mashiro]

動作確認しているスマホはiPhoneですか？
iPhoneだった場合、ブラウザはSafariですか？

[kyoya0819]

別にiPhoneだったらブラウザは関係ないです。

[Raccoon]

コメントありがとうございます！
iPhoneです。safariやGoogleで開いてみましたがダメでした。

https://chacchaka.xyz/wp-test/
ここで練習しています。ものすごく暇な時でいいので解決策を教えていただけたら幸いです。

codeタグの 『overflow-x: scroll;』が！マークと線で打ち消してありました。
まず、デベロッパーツールの使い方から勉強します・・・。

Answer 1

pre,codeをどれだけ手を加えてもダメでしたが、
実機だと 改行と検索して答えにたどり着きました！

body{overflow-wrap: break-word;}

親要素のCSSが改行させていたみたいなので、下記のソースコードを追加しました。

pre,code{overflow-wrap: normal;}

preタグだけでも良いのかもしれませんが、とりあえずcodeも書きました。
良い勉強になりました！

Answer 2

overflow: auto;

としてみてください。

Comments

[Raccoon]

autoもダメでした！
別ブロックで1行追加したら、その1行だけはスクロールできました！
なので、仕事が終わってからデベロッパーツールで比較してみます。
わざわざ回答していただきありがとうございました(^^)