Entfernen Sie die führenden Leerzeichen aus whitespace: pre-element

Möchte ich verwenden Sie eine benutzerdefinierte Formatvorlage für code-snippets in meinem blog. Ich definierte die folgenden Stil:

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

Ich benutze es wie folgt:

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

Dies gibt die folgende Ausgabe. Ich habe versucht auf Firefox und Google Chrome.

Entfernen Sie die führenden Leerzeichen aus whitespace: pre-element

Möchte ich entfernen Sie die zusätzliche Zeile am Anfang des Blocks. Natürlich, ich verstehen, wo der Zeilenumbruch kommt, und das kann ich verwenden <mystyle>int main() { statt. Wenn ich <pre> statt <mystyle>, es gibt keine zusätzlichen Zeilenumbruch, so ist es möglich, dies zu tun mit meinem eigenen Stil zu?

Sorry, wenn der Titel beschreibt nicht das problem auch, bitte fühlen Sie sich frei, es zu ändern.
Was verwenden Sie, um Ihre benutzerdefinierten Eingaben, können Sie uns zeigen, einige code?
Warum nicht Sie Stil die <pre> tag, oder bin ich etwas fehlt?
möglich, Duplikat der Wie, um einen anderen tag Verhalten sich genau wie die pre-tag mit CSS?
Ich will verschiedene Stile, zum Beispiel, eine für die Ausgabe in der Konsole, eine andere für den falschen code, etc.

InformationsquelleAutor Masked Man | 2013-06-28

  1. 4

    Fügen Sie den Stil auf die <pre> tag, mit einer Klasse. Zum Beispiel (versucht es einfach zu halten hier).

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

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

    Dann deine CSS sieht wie folgt aus:

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

    Wenn Sie es nicht tun, was Sie wollen, dann ich bin verwirrt durch Ihre Frage, Kommentar, und ich werde entfernen die Antwort.

    Das hat auch nicht wirklich die questuon als gefragt, da heißt es: "Wenn ich <pre> statt <mystyle>, es gibt keine zusätzlichen Zeilenumbruch, so ist es möglich, dies zu tun mit meinem eigenen Stil zu?" In der Praxis ist es jedoch, die Antwort, die Punkte in die richtige Richtung. Es gibt spezielle parsing-Regeln für pre Elemente, wodurch eine erste Zeilenumbruch werden ignoriert. Imitieren diese für andere Elemente ist notdürftigem (es könnte getan werden, mit einem negativen margin-top, aber dann müssten Sie davon ausgehen, dass der Inhalt wirklich beginnt mit einem Zeilenumbruch).

    InformationsquelleAutor naththedeveloper

  2. 14

    Check-out die Antwort auf diese sehr ähnliche Frage:

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

    Eventuell eine modern-ish-browser, obwohl.

    Wünschte, ich könnte upvote dies mehr als einmal
    Dies sollte die akzeptierte Antwort.

    InformationsquelleAutor jwd

  3. 7

    Anpassen margin-top an, was line-height, die Sie eingestellt haben.

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

    Dies funktioniert mit FF auch, die :first-line hack nicht lösen können.

    InformationsquelleAutor tom10271

  4. 1

    Code-Formatierung ist die Essenz hier, stellen Sie sicher, dass jede Zeile beginnt mit dem ersten Zeichen der Zeile:

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

    Folgende CSS ausreichen:

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

    Lesen dieser Artikel auf whitespace, und die folgenden auf wie man die 'bekämpfen'. Obwohl der Letzte Artikel behandelt Leerzeichen zwischen inline-Elemente, die Formatierung, die Lösung bezieht sich auf deine Frage.

    InformationsquelleAutor Raybiez

  5. 1

    Wie etwa

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

    Keine Leerzeichen vor oder nach...

    Die OP schon gesagt, dass Sie wissen, Sie können dies tun: "Natürlich, ich verstehe, wo der Zeilenumbruch kommt, und das kann ich verwenden <mystyle>int main() { statt.". Dies ist nicht anwendbar auf...
    Schade, der OP ist auf der Suche nach dem unmöglichen. Ein Zeilenumbruch ist das erste Zeichen innerhalb der element-und whitespace: pre ist, um Sie zu Ehren.

    InformationsquelleAutor rodrigo-silveira

  6. 1

    Wenn wir white-space: pre-wrap dann, wenn die Seite gerendert wird, es dauert auch ein Raum aus Ihrer html-Datei. Also nehmen wir an wir haben:-

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

    Den text Rendern, auf diese Weise:-

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

    Daher sollten wir HTML so aus:-

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

    InformationsquelleAutor prashantsahni

  7. 0

    Einfach fixieren Sie Ihre Vorlage, Mann. Das ist einfachste Weg:

    <mystyle>int main() {
  cout << "Hello World" << endl;
}</mystyle>
    Was ist der Punkt der Buchung eine Antwort, die bereits gebucht wurde über 3 Jahre her, und die habe ich bereits in meine eigene Frage?
    Ich hatte dasselbe Problem und fand einen besseren Weg, es zu lösen. Vielleicht hat jemand anderes dies liest.
    Ja, aber das ist schon in der Frage genannten sowie eine weitere Antwort.

    InformationsquelleAutor Zorin V.

  8. -2

    Benutze ich

    white-space: initial;

    und es funktioniert bei mir einwandfrei.

    Dies zerstört den rest der Formatierung

    InformationsquelleAutor M.G

Schreibe einen Kommentar