HTML & lt; pre & gt; tag provoque des sauts de ligne

Je suis en utilisant le CSS (via JQuery , mais pas à cette question) pour mettre en évidence certains éléments à l'intérieur d'un fichier HTML: je suis à l'aide de "pré" balises pour séparer les éléments logiques dans mon fichier, mais j'ai remarqué que le "pré" tags semblent laisser les retours à la ligne entre les éléments.

Puis-je me débarrasser de ces à l'aide de CSS ?

(Ou ce que doit je utiliser à la place de "pré" tags? Les éléments de texte peuvent contenir des éléments HTML themeselves : qui devrait pas être rendus, et devrait être affiché littéralement que le code source: d'où mon choix initial avec "pré" tags)

Voici un exemple de code HTML que j'utilise: (Nécessite http://docs.jquery.com/Downloading_jQuery pour cet exemple)

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

J'utilise Firefox 3.6.12.
C'est ce que le code ci-dessus se traduit par:
HTML & lt; pre & gt; tag provoque des sauts de ligne

Et c'est simulé de sortie de ce que je veux (passage en jaune, seulement parce que j'ai utilisé mon éditeur vim pour cela, faire semblant c'est rouge!)

HTML & lt; pre & gt; tag provoque des sauts de ligne

SOLUTION:

Est d'utiliser "display:inline" pour toutes les balises. (Auparavant, j'étais seulement en appliquant le "display:inline "à l' "erreur" des balises dans l'exemple ci-dessus, et avait oublier de faire la même chose pour " ok " avant de balises.

source d'informationauteur monojohnny

20

C'est parce que <pre> a un style par défaut display: blockutiliser dans votre css pre { display: inline}

comme pour votre travail d'édition, vous devez ajouter margin: 0; à TOUS les pré blocs, et pas seulement ceux que vous voulez style:
```
pre {
    display: inline;
    margin: 0;
}
```
Vous devriez essayer d'éviter de les coiffer avec JS chaque fois que possible, mais si vous devez vraiment:
```
<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>
```
7

Le pré de la balise est un élément de niveau bloc, de sorte qu'il se comporte comme n'importe quel autre élément de niveau bloc et de la pile à la verticale (comme le paragraphe, div, etc). Vous pouvez le mettre en display:inline au lieu de cela, je suppose.

Mais le mieux serait d'utiliser le <code> tag, qui est sur la ligne par défaut.

http://www.htmlcodetutorial.com/_CODE.html

Vous pouvez fixer à l'aide de css comme suit

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

    }

3

Vous pouvez forcer le pré tag pour être un élément inline en ajoutant ceci dans la tête:
```
<style type='text/css'> pre {display: inline;} </style>
```
1

Vous pouvez convertir la source HTML d'utiliser des caractères spéciaux à la place de < > (comme < >). Vous pouvez le faire avec notepad++ à l'aide de TextFX Plugin (Coder en HTML) ou dans eclipse, vous pouvez le faire avec anyedit outils.

Pourquoi êtes-vous à l'aide de jQuery pour quelque chose qui peut être atteint via CSS?

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

0

vous pouvez utiliser padding:0 et margin:0 pour pre en css
0
```
pre { margin: 0; }
```
devrait vous donner le rendu de la deuxième image. Votre extrait de code n'a probablement pas de travail parce que vous ne supprimez pas la marge par défaut à partir de la pre.ok.
0

N'utilisez pas de pré, au lieu d'échapper les caractères que vous souhaitez afficher littéralement. Comme < et > pour < et >.
Lorsque vous effectuez le rendu de votre page, vous pouvez utiliser une fonction comme htmlentities() (PHP) pour échapper à ces caractères.

Vous devez vous connecter pour publier un commentaire.