1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

kein Zeilenumbruch bei <pre> und <code>

Dieses Thema im Forum "Allgemeines" wurde erstellt von B-52, 2. August 2013.

  1. B-52

    B-52 Well-Known Member

    Registriert seit:
    16. März 2008
    Beiträge:
    1.189
    Zustimmungen:
    16
    Hallo Community,

    wie bringe ich WP bei, bei
    <code> und <pre>
    kein automatischer Zeilenumbruch erfolgt, und die Coderzeile/Ausgabezeile auf einer Linie erscheint! Egal ob ein Leerschlag eingegeben wurde!

    z.B. hier bei Punkt 12 oder 14 erscheint eine simple, horizontale Scrollbar!

    Gruss B-52
     
  2. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    Das liegt wohl nur an Deiner CSS. Für pre-Bereiche verwendest Du overflow:auto, was erst einmal richtig ist, doch eventuell ärgert das white-space: pre-wrap und verhindert bei zu wenig Platz, dass overflow:auto richtig greift. Habe es aber nicht getestet.
     
  3. B-52

    B-52 Well-Known Member

    Registriert seit:
    16. März 2008
    Beiträge:
    1.189
    Zustimmungen:
    16
    du bist genial. DANKE! das war es auch. Lösche
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und es funktioniert!

    PS: irgendwie ist mir das jetzt peinlich... wie konnte ich das übersehen?
     
  4. B-52

    B-52 Well-Known Member

    Registriert seit:
    16. März 2008
    Beiträge:
    1.189
    Zustimmungen:
    16
    @Melewo - die Lösung scheint jedoch nur auf Iceweasel und deren Derivate zu funktionieren! Auf dem IE 10 wird keine Scrollbar angezeigt. Böses Windows! (desshalb benutze ich kein Windows)
     
  5. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    Ich arbeite nur mit dem FF unter Windows und wenn ich da mit dem Inspektor nach den Regeln suche, so zeigt der mir an, dass da noch word-wrap: break-word und hyphens von

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    auf

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    vererbt wird. Möglich das die Browser damit etwas unterschiedlich umgehen. Weiß jetzt im Augenblick nicht einmal, wie man word-wrap in pre-Bereich verneint oder zur Not mit !important überschreibt, außer mit der Angabe 'normal'. Mit white-space wäre es wohl auch so möglich gewesen:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Doch hyphens habe ich entfernt. Du könntest es mit

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    für pre probieren. Für ältere IE ist es zusätzlich wichtig, dass auch einige Anpassungen in der css/ie.css vorgenommen werden. Zusätzlich habe ich eine kleine Funktion geschrieben, die da einiges in pre-Bereichen nach meinen Vorstellungen anpasst, doch die benötigst Du zur Zeit noch nicht bei Deinen Beispielen, wie es ausschaut. Von CSS3 kenne ich bisher auch nur die Regeln, über die ich stolpere und bin kein Experte in Sachen CSS.

    Bei mir sieht es zumindest so aus und ich sah bisher noch keine Unterschiede in den drei Browsern, die ich zur Kontrolle benutze:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #5 Melewo, 3. August 2013
    Zuletzt bearbeitet: 3. August 2013
  6. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    So, nun habe ich gerade noch einmal einen Test mit dem 'Opera Mobile Emulator' gemacht, da halten die pre-Bereiche ebenfalls, wie es ausschaut. Werfe einfach einen Blick auf die Beispiel-Seite, wenn die bei Dir im Browser anders ankommen sollte, bin ich sicherlich etwas geknickt. Wenn nicht, suche Dir aus meiner CSS die Regeln heraus und passe die Farben an und gut sollte es sein.
     
  7. B-52

    B-52 Well-Known Member

    Registriert seit:
    16. März 2008
    Beiträge:
    1.189
    Zustimmungen:
    16
    @Melewo
    vielen Dank für Deine Mühe!
    white-space: nowrap; wäre zwar die Lösung, wenn der Zeilenumbruch innerhalb von <pre> mit <br /> erzwungen wird. Leder entfernt dieser Befehl jede Leerzeile. Bei einer Auflistung von Partitionstabellen sieht das dann komisch aus...

    Das entfernen von
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    bracht jedenfalls auf einigen Browsern die Lösung.

    Nochmals vielen Dank für Deine Mühe. Falls ich doch noch eine akzeptable Lösung finde, werde ich sie posten!

    Gruss B-52
     
    #7 B-52, 3. August 2013
    Zuletzt bearbeitet: 3. August 2013
  8. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    Mal eine ganz dumme Frage von mir, wie fügst Du denn den Inhalt für pre ein?

    Also, ich nutze eine Export-Funktion vom Notepad++, NppExport to HTML und da diese mir noch nicht richtig gefällt, rufe ich die exportierte Datei einmal kurz in einem Browser mit einem eigenen Script auf, welches die Styles durch die von mir verwendeten CSS Klassen ersetzt.

    Probleme gab es mit WP schon, da zum Beispiel http:// in Kommentaren umgebrochen wurde. Um das zu verhindern, bzw. auch noch für ein paar andere Kleinigkeiten, hatte ich mir, wie bereits erwähnt, eine kleine Funktion geschrieben.

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ich lasse jetzt hier im Code das Semikolon ; hinter #039, #091 und #093 weg, damit keine Umwandlung erfolgt, es gehört jedoch zwingend dazu.

    Die ersten beiden sind für gequotete Anführungszeichen, die nächsten beiden sind für die Klammern von Short-Tags, damit die Tags angezeigt und nicht die Funktion aktiviert wird, und [noum]http://www.example.com[noum] bedeutet halt, kein Umbruch davor und dahinter, was eigentlich nur für Kommentare gedacht ist.

    Du könntest es jedoch auch einmal mit einem Plugin für Code probieren.
     
    #8 Melewo, 3. August 2013
    Zuletzt bearbeitet: 3. August 2013
  9. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    So, nun hat es mir gereicht, soll heißen, es hat mir keine Ruhe gelassen und ich habe mir Deine eine Seite (Theme Twenty Thirteen) mit Beispiel-Code 13. als HTML-Seite abgespeichert, zusammen mit der CSS. Und wenn ich die Vererbung von word-wrap mit !important überschreibe, dann wird das Listing 13. Sauber und ordentlich im FF, Chrome und IE angezeigt, der Scrollbalken bildet sich und alles wird so dargestellt, wie man es von einem ordentlichen Listing erwartet.

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn Du das so abänderst, dann funktioniert das auch, zumindest bei mir unter Localhost.
     
  10. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    Das scheint sogar ohne !important zu halten, kannst Du aber im Zweifel mit !important belassen. Wichtig ist ja nur word-wrap auf normal zu setzen, damit kein ungewollter Umbruch erfolgt.

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Nur frage ich mich, warum das bei mir bisher nicht ärgerte.
     
  11. B-52

    B-52 Well-Known Member

    Registriert seit:
    16. März 2008
    Beiträge:
    1.189
    Zustimmungen:
    16
    Danke! Genau das was ich wollte. Echt jetzt, Du bist genial.

    Gruss B-52
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden