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

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

Posted at May 14,2011 1:55 AM
Tag:[CSS]

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

1.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」に対応しています。

2.サンプル

適用前

<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>

3.ブラウザ別の動作確認結果

ざっと確認したところ、プロパティの効果は次のようになりました(○:有効/×:無効)。

確認ブラウザword-wrapwhite-space
IE9×
Firefox4×
Chrome11
Safari5
Opera11

4.参考サイト

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

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)