スマホ実機で＜pre＞内テキストが自動改行され、overflow: auto;が効かない件
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
ひとつ前の記事でちょっとしたコードを＜pre＞で囲って書いたら、意図しない挙動とたまたま遭遇しました。
スマホ実機で＜pre＞内テキストが自動改行されてしまう
デベロッパーツールでデバイス表示切替をしても自動改行はされないんですが、スマホ実機だと＜pre＞内の文字列が自動改行されちゃうんですよね。
当然自動改行されちゃってるのでoverflow: auto;しても意味がありませんでした。
Androidではちょっと未検証なんですが、iOS実機だとSafari / chrome / firefox全滅。
まあそもそも＜pre＞なんて大して使うこともないし、こんなハック書いたところで誰が喜ぶんだという話なんですが苦笑
＜pre＞は基本的に自動改行されない
「pre」は「preformatted text（整形済みテキスト）」の略で、＜pre＞に囲われたテキストは下記の特徴を持ちます。
- スペースや改行などをそのまま表示
- 自動改行されない
要するに普通ほとんど使わないということです笑
＜pre＞を一度も使わずに生涯を終える人間がほとんどでしょう。
ただちょっとしたコードをそのまま表示する時には便利っちゃ便利なんですよね。
長いコードはGistで表示しますが、短かったりシンプルなものは＜pre＞で書いても良いかな、という感じです。
話が逸れましたが、原因については記事部分全体を囲う親要素の下記CSS指定が恐らく関係してると判断しました。
.parent { //preの親要素
word-wrap: break-word;
overflow-wrap: break-word;
}
URLや欧文等を記事タイトルor本文に書いた時のテキストの飛び出しを防止するために指定したものでした。
word-wrapは子要素に継承する
リファレンスで調べてもわかるのですが、word-wrap（CSS3ではoverflow-wrap）は子要素にその値を継承します。
なので本来であればPCで確認しても＜pre＞内のテキストは自動改行されてしまっているはずだと思います。
このPCとスマホ実機の挙動の差についてはまだ原因不明なんですが、ともあれ意図する挙動にするためのCSS指定ができていなかったわけですね。
明示的に＜pre＞要素へ「word-wrap: normal;」を指定して解決
というわけで＜pre＞要素のCSSに「word-wrap: normal;」（途中改行させない）を明示的に指定する（上書きする）ことでスマホ（iOS）実機でもoverflow: auto;が効くようになりました。
うーむ継承問題はともすると盲点になりやすい。気をつけねば。
あとやはりブラウザの機能に頼らない、実機でのテストは大事ですね。
これを機にテスト機買おうかなあ。。
