CSS

Chromeのpreタグにoverflow-wrap:break-wordが効かなかったので色々調べてみた

2018.01.08

文字列

Chromeのpreタグでoverflow-wrap:break-wordが効かなかったので、ついでに色々調べてみました。

preタグにはwhite-space:pre-wrap

preタグにoverflow-wrap:break-wordが効かなかった問題はwhite-space:pre-wrapを指定することにより回避しました。

pre{
  overflow-wrap : break-word;
  white-space: pre-wrap;
}

折り返すことはできましたが、preタグ内で折り返すことは、そもそも使い勝手的にどうなのか?という疑問が残りましたので、折り返しを解除し横スクロールを入れることにしました。

pre{
  overflow-wrap:normal;
  overflow-x: scroll;
}

Safariで横スクロールしない

折り返しを止めると、今度はSafariで横スクロールしないという現象に遭遇!

原因は*アスタリスクにoverflow-wrap:break-wordを指定したこと

Safariで横スクロールができなかった原因は*アスタリスクにoverflow-wrap:break-wordを指定してたことでした。該当セレクタに!importantで上書きしても効きません。

IE系が最新ブラウザと振る舞いが違うのは、これまでもよくあったのでなんとなく対策方法も想像できたのですが、ChromeとSafariでも振る舞いが違うものなんですね!今回の場合は書き方を調整するだけで、同じ振る舞いにできました。その辺がIEとの違い!

ChromeとSafariの振る舞いの違い

今回ChromeとSafariでもう一つ振る舞いの違いを発見しました。Safariは親要素にoverflow-wrap:break-word;を記述しておくと子要素にも適応されますが、Chromeは適応されません。しかし親要素に指定があるとwhite-space:pre-wrapと併記する必要はありません。

Safariに有効な記述

<div class="of-wrap">
  <pre>
    Awonderfulserenityhastakenpossessionofmyentiresoul,likethesesweetmorningsofspringwhichIenjoywithmywholeheart.Iamalone,andfeelthecharmofexistenceinthisspot,whichwascreatedfortheblissofsoulslikemine.Iamsohappy,mydearfriend,soabsorbedintheexquisitesenseofmeretranquilexistence,thatIneglectmytalents.Ishouldbeincapableofdrawingasinglestrokeatthepresentmoment;andyetIfeelthatIneverwasagreaterartistthannow.When,whilethelovelyvalleyteemswith
  </pre>
</div>
.of-wrap{
  overflow-wrap : break-word;
}
pre{
  white-space: pre-wrap;
}

Chromeにも有効な記述

<div class="of-wrap">
  <pre>
    Awonderfulserenityhastakenpossessionofmyentiresoul,likethesesweetmorningsofspringwhichIenjoywithmywholeheart.Iamalone,andfeelthecharmofexistenceinthisspot,whichwascreatedfortheblissofsoulslikemine.Iamsohappy,mydearfriend,soabsorbedintheexquisitesenseofmeretranquilexistence,thatIneglectmytalents.Ishouldbeincapableofdrawingasinglestrokeatthepresentmoment;andyetIfeelthatIneverwasagreaterartistthannow.When,whilethelovelyvalleyteemswith
  </pre>
</div>
pre{
  overflow-wrap : break-word;
  white-space: pre-wrap;
}

今回の振る舞いの違いはpreタグです。pタグはChromeもSafariも同じ振る舞いでした。奥が深い!!!

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する