16

CSSを使用して（JQueryを介して、ただしこの質問には関係ありません）、HTMLファイル内の特定の要素を強調表示しています。「pre」タグを使用してファイル内の論理要素を分離していますが、「pre」タグに気づきました。要素間に改行を残すようです。

CSSを使用してこれらを取り除くことはできますか？

（または、「pre」タグの代わりに何を使用しますか？テキスト要素にはHTML要素が含まれている可能性があります：これはレンダリングされるべきではなく、文字通りソースコードとして表示される必要があります：したがって、「pre」タグを使用した最初の選択）

これが私が使用しているHTMLの例です:(この例にはhttp://docs.jquery.com/Downloading_jQueryが必要です）

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>

Firefox3.6.12を使用しています。上記のコードの結果は次のとおりです。 代替テキスト

そして、これは私が欲しいもののシミュレートされた出力です（これにvimエディターを使用したという理由だけで、黄色に切り替えました。赤いふりをしてください！）

代替テキスト

解決：

すべてのPREタグに「display：inline」を使用します。（以前は、上記の例では「display：inline」を「error」タグにのみ適用していましたが、「ok」preタグにも同じことを行うのを忘れていました。

4

9 に答える 9

36

これ<pre>は、デフォルトのスタイルがありdisplay: block、css で使用するためです。pre { display: inline}

margin: 0;編集に関しては、スタイルを設定したいブロックだけでなく、すべての事前ブロックに追加する必要があります。

pre {
    display: inline;
    margin: 0;
}

可能な限り JS を使用したスタイル設定は避けるようにしてください。

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
    $("pre").css({ "margin" : 0, "padding" : 0 })
</script>
于 2010-11-20T17:02:10.930 に答える
9

pre タグはブロック レベルの要素であるため、他のブロック レベルの要素と同じように動作し、縦に積み重ねられます (段落、div など)。代わりに display:inline に設定できると思います。

ただし<code>、デフォルトでインラインになっているタグを使用することをお勧めします。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

于 2010-11-20T17:05:03.607 に答える
4

次のようにcssで修正できます

pre {
    width: 600px;                          /* specify width  */
    white-space: pre-wrap;                 /* CSS3 browsers  */
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap;                /* Opera 4 thru 6 */
    white-space: -o-pre-wrap;              /* Opera 7 and up */
    word-wrap: break-word;                 /* IE 5.5+ and up */

    }
于 2012-07-26T08:11:29.980 に答える
4

これを head に追加することで、 pre タグを強制的にインライン要素にすることができます:

<style type='text/css'> pre {display: inline;} </style>
于 2010-11-20T17:06:13.610 に答える
2

CSS で実現できるものに jQuery を使用するのはなぜですか?

<html>
<head>
    <style type="text/css">
    pre {
        display: block;
        padding: 0;
        margin: 0;
    }
    pre.error {
        background-color: red;
        color: white;
    }
    </style>
</head>
<body>
    <pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
    <pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
    <pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
</body>
</html>
于 2010-11-20T22:00:23.927 に答える
1 
pre { margin: 0; }

2番目の画像のレンダリングを提供する必要があります。からデフォルトのマージンを削除しないため、スニペットはおそらく機能しませんpre.ok。

于 2010-11-20T21:19:49.123 に答える
1

< >(のような)の代わりに特殊文字を使用するように HTML ソースを変換できます&lt; &gt;。これは、TextFX プラグイン (HTML のエンコード) を使用して notepad++ で行うことができます。または、Eclipse では、任意の編集ツールでこれを行うことができます。

于 2010-11-20T17:04:45.293 に答える
0

CSSでpadding:0and margin:0forを使用できますpre

于 2010-11-20T17:06:14.393 に答える
0

pre を使用しないでください。代わりに、表示したい文字を文字通りエスケープします。&lt;と&gt;のよう<に>。ページをレンダリングするとき、(PHP) のような関数を使用してhtmlentities()これらの文字をエスケープできます。

于 2010-11-20T17:06:14.953 に答える