web-dev-qa-db-ja.com

HTMLの<pre>タグが改行を引き起こす

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

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

（または、「pre」タグの代わりに何を使用しますか？テキスト要素にはHTML要素が含まれている可能性がありますテーマ自体：notレンダリングする必要があり、表示する必要があります文字通りソースコードとして：したがって、「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を使用しています。上記のコードの結果は次のとおりです。 alt text

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

alt text

解決：

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

htmlcssnewlineline-breakspre
13
monojohnny

これは、<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>
26
Razor

Preタグはブロックレベルの要素であるため、他のブロックレベルの要素と同じように動作し、垂直方向にスタックします（段落、divなど）。代わりにdisplay：inlineに設定できます。

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

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

9
hollsk

あなたは次のように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 */

    }
4
QuyLT

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

<style type='text/css'> pre {display: inline;} </style>
4
tshao

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

1
bkilinc

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>
1
Eric
pre { margin: 0; }

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

0
Ms2ger

cssのpreにはpadding:0とmargin:0を使用できます

0
Sotiris

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

0
GolezTrol