2013年4月26日金曜日

prettyprint で overflow:auto; を指定しても改行されてしまう


ブログへソースコードを載せるときには Google Code Prettify を使っています。

google code - google-code-prettify
http://code.google.com/p/google-code-prettify/

さらに CSS で overflow:auto; を指定すれば、
コードがはみ出しても横スクロールできると多くのサイトで書いてあります。
しかし、Blogger で overflow:auto; を指定してもコードが改行されずに困っていました。

overflow: auto; にしても勝手に改行される

結局、Blogger がデフォルトで word-wrap: break-word; を指定していることが原因でした。

改めて word-wrap: normal; を指定することで、
勝手に改行されずにスクロールできるようになりました。

word-wrap: normal; を指定すると改行されなくなった


ちなみに、試行錯誤した結果、テンプレートの HTML へ以下のコードを追加するが一番だとわかりました。


<head> タグの中へ以下を追加
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default'/>
<style>
pre.prettyprint {
overflow: auto;
word-wrap: normal;
}
</style>

これが一番楽


参考


mig-ration - overflow:auto で横スクロールバーが表示されない件(解決)
http://mig-ration.blogspot.jp/2007/04/overflowauto-resolved.html

0 件のコメント:

コメントを投稿