Supprimer les espaces d'un espace: pré élément

Je veux utiliser un style personnalisé pour les extraits de code dans mon blog. J'ai défini le style suivant:

mystyle {  
  background: #C3FFA5;  
  border: solid 1px #19A347;  
  color: #191919;  
  display: block;  
  font-family: monospace;  
  font-size: 12px;  
  margin: 8px;  
  padding: 4px;  
  white-space: pre;  
}

Je l'utilise comme suit:

<mystyle>
int main() {
    cout << "Hello World" << endl;
}
</mystyle>

Cela donne le résultat suivant. J'ai essayé sur Firefox et Google Chrome.

Supprimer les espaces d'un espace: pré élément

Je veux supprimer la ligne supplémentaire au début du bloc. Évidemment, je comprends d'où le retour à la ligne vient de, et que je peux utiliser <mystyle>int main() { à la place. Si j'utilise <pre> au lieu de <mystyle>, il n'y a aucun retour à la ligne, donc est-il possible de faire cela avec mon style personnalisé?

Désolé si le titre ne décrit pas le problème, n'hésitez pas à le changer.
De quoi êtes-vous à l'aide de processus personnalisé de votre intrants, pouvez-vous nous montrer un peu de code?
Pourquoi ne pas vous juste le style de la <pre> tag, ou ai-je raté quelque chose?
double possible de Comment faire un tag se comportent exactement comme le pre de la balise à l'aide de CSS?
Je veux utiliser plusieurs styles, par exemple, l'un pour la sortie de la console, l'autre pour le mal de code, etc.

OriginalL'auteur Masked Man | 2013-06-28

  1. 4

    Ajoutez le style à la <pre> balise, à l'aide d'une classe. Par exemple (en essayant de garder les choses simples ici).

    <pre class="console">
    //Some code here to be styled.
</pre>

<pre class="some-other-style">
    //Some code here to be styled.
</pre>

    Alors votre CSS ressemble à ceci:

    pre.console {
    color: #fff;
    background-color: #000;
}
pre.some-other-style {
    color: #f00;
    background-color: #fff;
}

    Si ce n'est pas faire ce que vous voulez, alors je ne comprends pas bien votre question, tout commentaire et je vais supprimer la réponse.

    Ce n'est pas vraiment de l'adresse de questuon comme demandé, car il dit: “Si j'utilise <pre> au lieu de <mystyle>, il n'y a aucun retour à la ligne, donc est-il possible de faire cela avec mon style personnalisée trop?” En termes pratiques, cependant, la réponse de points dans la bonne direction. Il y a des règles d'analyse pour pre éléments, provoquant un premier saut de ligne pour être ignoré. Une imitation de ce pour d'autres éléments encombrants (il pourrait être fait à l'aide d'un négatif de la marge supérieure, mais alors vous devez supposer que le contenu commence vraiment avec un saut de ligne).

    OriginalL'auteur

  2. 14

    Découvrez la la réponse à cette question très semblable:

    .mystyle:first-line {
    line-height: 0px;
}

    Peut nécessiter un moderne-ish navigateur, cependant.

    Souhaite que je pourrais upvote ce plus d'une fois
    Ce doit être la accepté de répondre.

    OriginalL'auteur

  3. 7

    Ajuster margin-top à ce que la hauteur de la ligne que vous avez défini.

    .text {
    margin-top: -1em;
    white-space: pre-line;
}

    Cela fonctionne pour les FF, ce qui :première ligne de hack ne peut pas réparer.

    OriginalL'auteur

  4. 2

    Lorsque nous utilisons white-space: pre-wrap, puis quand la page s'affiche, il faut aussi de l'espace à partir de votre fichier html. Supposons donc que nous avons:-

    <div style="white-space:pre-wrap"> <!-- New Line -->
   <!-- 2 space --> This is my text
</div>

    Le texte sera rendu dans cette voie:-

    <leading line>     
<2 spaces >This is my text

    Donc nous devrions HTML comme ceci:-

    <div style="white-space:pre-wrap">This is my text</div>

    OriginalL'auteur

  5. 1

    De formatage de Code qui est l'essence même ici, assurez-vous que chaque ligne de démarrer sur le premier caractère de la ligne:

    <pre class="code">
int main() {
    cout << "Hello World" << endl;
}
</pre>

    Le code CSS suivant suffira:

    pre.code
{
    background: #C3FFA5;  
    border: solid 1px #19A347;  
    color: #191919;  
    display: block;  
    font-family: monospace;  
    font-size: 12px;  
    margin: 8px;  
    padding: 4px;
}

    Lire cet article sur les espaces, et le suivant sur comment faire pour 'combattre'. Bien que le dernier article traite de l'espace entre les éléments en ligne, la mise en forme de la solution qui a trait à votre question.

    OriginalL'auteur

  6. 1

    Comment sur

    <mystyle>into main() {
    //...
}</mystyle>

    Pas d'espace avant ou après...

    L'OP a déjà indiqué qu'ils savent qu'ils peuvent faire ceci: "Évidemment, je comprends d'où le retour à la ligne vient de, et que je peux utiliser <mystyle>int main() { à la place.". Ce n'est pas applicable...
    Dommage que la COOP est à la recherche de l'impossible. Un retour à la ligne est le premier caractère à l'intérieur de l'élément et whitespace: pre est la respecter.

    OriginalL'auteur

  7. 0

    Juste corriger votre modèle, homme. C'est la méthode la plus simple:

    <mystyle>int main() {
  cout << "Hello World" << endl;
}</mystyle>
    Quel est le point de poster une réponse qui a déjà été posté plus de 3 ans, et dont j'ai déjà mentionné dans ma propre question?
    J'ai eu le même problème et trouvé une meilleure façon de le résoudre. Peut-être que quelqu'un va lire ce.
    Ouais, mais c'est déjà mentionné dans la question, ainsi qu'une autre réponse.

    OriginalL'auteur

  8. -2

    - Je utiliser

    white-space: initial;

    et c'est un travail avec moi amende.

    Cette volonté de détruire le reste de la mise en forme

    OriginalL'auteur