0

以下のコードを使用すると、コードを目立たせるための「コードブロック」が可能になります。折り返す方法はありますが、テキストの周りのボックスをきつくしすぎないようにしますか（20pxの境界線かもしれませんか？）？そして関連して、次の行にラップされる前に内部のコードがどこまで進むことができるかを制限する方法はありますか？これにより、コードブロックのサイズを1000pxに制限できます

フィドル

HTML

<HTML>
    <HEAD>
        <TITLE>Sample Wiki Page</TITLE>
        <link rel='stylesheet' type = 'text/css' href = 'default.css' />
    </HEAD>
    <BODY>
        <DIV id='content'>
            <h3>Main Title</h3>
            <h2>Sub Title</h2>
                <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.

                    Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum arcu non egestas.
                </p>
            <h2>Code Section</h2>
            <pre>
                <xmp>
<HTML>
    <HEAD>
        <TITLE>Sample Wiki Page</TITLE>
        <link rel='stylesheet' type = 'text/css' href = 'default.css' />
    </HEAD>
    <BODY>
        <h3>Main Title</h3>
        <h2>Sub Title</h2>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut
             suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum 
             ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi 
             semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar 
             justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros 
             pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia 
             tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere 
             nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet 
             mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit.

            Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus 
            fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis 
            augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor 
            a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem
            . Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, 
            accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices 
            placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum 
            arcu non egestas.
        <h2>Code Section</h2>
        <pre>
        </pre>
    </BODY>
</HTML>
            </xmp>
            </pre>
        </DIV>
    </BODY>
</HTML>

CSS

#content pre {
    padding: 1em;
    border: 1px dashed #2f6fab;
    color: black;
    background-color: #f9f9f9;
    white-space: pre;
    margin: 1em 0px;
    display: block;
    font-family: monospace,Courier;
    line-height: 1.1em;
    width:70%;
}

#content h3{
    font-size: 188%;
    line-height: 1.2em;
    color: black;
    background: none;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: .5em;
    padding-bottom: .17em;
    border-bottom: 1px solid #aaa;
    margin-bottom: 1.2em;
}
#content h1, h2 {
    color: black;
    background: none;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: .5em;
    padding-bottom: .17em;
    border-bottom: 1px solid #aaa;
    width: 40%;
}
4

2 に答える 2

1

white-space: pre-wrap;タグに追加する必要がありますxmp。

于 2013-01-23T19:20:40.193 に答える
0

xmpタグはしばらくの間非推奨になっていると思います。「違法な」文字をhtml-entitiesに変換するには、テキストをエンコードする必要があります。多くのIDEがこの機能を提供していますが、スクリプトやオンラインツールを使用することもできます。

また、preタグを使用する場合、改行を自動化することはできません。これがまさにpreの目的です。

アプローチを変更して、次のようなものを確認することをお勧めします：http ://code.google.com/p/google-code-prettify/

この方法には、コードの色付けなどの利点もあります。

于 2013-01-23T19:32:46.270 に答える