CSSの書き方を伝授してください

tooyama.orgサイトのモバイル対応を行っているのですが、CSSの書き方で詰まってしまいました。 サイトはLinuxのサーバー構築手順をまとめているのですが、コンソールの実行例を書くところを次のようなCSSで定義しています。

p.console {
 display: block;
 padding: 5px;
 background: black;
 color: white;
 font-family: monospace;
 font-size: 12pt;
 margin: 1em 2px;
 margin-top: 1em;
 margin-right: 0px;
 margin-bottom: 1em;
 margin-left: 0px;
 width: 700px;
 max-width:100%;
}

HTMLの方には次のように記述しています。

<p class="console">
# yum check-update
</p>

例のように挿入する文字列が短ければいいのですが、長いものがあるとこのままだと枠に入りきらない部分はぶつ切りになってしまいます。

これをなんとか「枠内で適当に改行される」か「スクロールバーで対処」できないものかなあと思っています。何かいい方法があれば教えてください。

フォローワーさんより教えてもらいました。

• https://twitter.com/momdo_/status/764700796936040450
• https://twitter.com/momdo_/status/764701349141282816

その結果、該当部分にはpre要素を使うことにし、

pre.console {
 display: block;
 padding: 5px;
 background: black;
 color: white;
 font-family: monospace;
 font-size: 12pt;
 margin: 1em 2px;
 margin-top: 1em;
 margin-right: 0px;
 margin-bottom: 1em;
 margin-left: 0px;
 width: 500px;　<-700px->500px
 max-width:100%; 
 overflow:scroll; <-はみ出る部分はスクロール対処
}

少々変更しました。 HTMLの方には次のように記述することにしました。

<p class="console">
# yum check-update
</p>

変更するファイルが結構多いので、暫定対処でp.consoleの方も修正しました。 いずれpreに書き直します。

p.console {
...
 width: 500px;　<-700px->500px
 max-width:100%; 
 overflow:scroll; <-はみ出る部分はスクロール対処
}

[8/15 追記] その後、width: 500px;のところは640pxにしました。割とそれでも影響なさそうだったので。

qiita.com