小粋空間  -  a cheap joke and a play on words site

pre要素で折り返しをするためのCSS

pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれませんが、URLなどの横に長い文字列をpre要素で表示したいときに有効かもしれません。

１．CSS

以下のCSSでpre要素の文字が折り返せます。「white-space: pre-wrap」または「word-wrap: break-word」に未対応のブラウザはoverflowプロパティでスクロールします。

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

以下は、過去の記事でよくみかけた設定です。

pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

「-moz-pre-wrap」はFirefox（Mozilla）のためのものですが、すでに削除されたようです（関連記事）。「-pre-wrap」「-o-pre-wrap」は過去バージョンのOpera用ですが、現バージョンのOperaは「white-space: pre-wrap」「word-wrap: break-word」に対応しています。

２．サンプル

適用前

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
    <input type="hidden" name="static" value="1" />
    <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
    <div id="comments-open-data">
        <div id="comment-form-name">
            <label for="comment-author">名前</label>
            <input id="comment-author" name="author" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
        <div id="comment-form-email">
            <label for="comment-email">電子メール</label>
            <input id="comment-email" name="email" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
    </div>
    <div id="comments-open-text">
        <label for="comment-text">コメント
        <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
        <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
    </div>
    <div id="comments-open-footer">
        <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="プレビュー" onclick="this.form.preview.value='1';" />
        <input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
    </div>
</form>

適用後　※適用されないブラウザではスクロール表示されます

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
    <input type="hidden" name="static" value="1" />
    <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
    <div id="comments-open-data">
        <div id="comment-form-name">
            <label for="comment-author">名前</label>
            <input id="comment-author" name="author" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
        <div id="comment-form-email">
            <label for="comment-email">電子メール</label>
            <input id="comment-email" name="email" size="30" value="" onfocus="mtCommentFormOnFocus()" />
        </div>
    </div>
    <div id="comments-open-text">
        <label for="comment-text">コメント
        <mt:IfAllowCommentHTML>(スタイル用のHTMLタグを使えます)</mt:IfAllowCommentHTML></label>
        <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
    </div>
    <div id="comments-open-footer">
        <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="プレビュー" onclick="this.form.preview.value='1';" />
        <input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
    </div>
</form>

３．ブラウザ別の動作確認結果

ざっと確認したところ、プロパティの効果は次のようになりました（○：有効／×：無効）。

確認ブラウザ	word-wrap	white-space
IE9	○	×
Firefox4	×	○
Chrome11	○	○
Safari5	○	○
Opera11	○	○

４．参考サイト

参考サイトは以下です。ありがとうございました。

• [ CSS ] pre でも改行を生かしたまま折り返す
• preタグ内のコードをボックス枠内で折り返すcss