TopCSS > 2011年5月
2011年5月14日

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

May 14,2011 1:55 AM
Tag:[]
Permalink

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.参考サイト

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

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3