overflow-x: hidden; funkt nicht bei Codezeilen
Bimmelbeule
0 
Rolf B
0 Bimmelbeule
0 Rolf B
0 
Michael_K
overflow-x: hidden; funkt nicht bei Codezeilen
Bimmelbeule
Hallo!
Ich habe ein kleines Blog mit bashblog aufgesetzt (ich liebe solche einfachen Tools!) und beim pimpen bin ich auf folgendes Problem gestoßen:
Auf meinem klugen Fernsprechapparat ragen die längsten Codezeilen des Artikels »bash einrichten« über den Rand hinaus, was dazu führt das wenn man mit dem Finger nicht »gerade scrollt«, ein Teil der Seite aus dem Blickfeld rutscht. Das stört mich!
Ein »overflow-x: hidden;« scheint bei Code nicht zu funktionieren. Stehe ich mal wieder auf dem Schlauch oder geht das wirklich nicht? Gibt es eine andere Lösung?
-
Hallo Bimmelbeule,
html { overflow-x: hidden; }nützt dir nichts.
Grund: Die fehlende Vererbung. Leider ist das für jede Eigenschaft individuell. Ob es ein Prinzip dahinter gibt, habe ich noch nicht durchschaut.
Rolf
--
sumpsi - posui - obstruxi-
Hallo!
Grund: Die fehlende Vererbung. Leider ist das für jede Eigenschaft individuell. Ob es ein Prinzip dahinter gibt, habe ich noch nicht durchschaut.
Ah, Danke für den Tipp…
Es funkt, wenn ich <li> den overflow gebe:
li {overflow-x: hidden;}Allerdings fehlt jetzt die Nummerierung der <li>s… [am Kopf kratz]
P.s. Wenn die Vererbung fehlt, ist es grundsätzlich sinnfrei overflow auf <html> zu setzen?
Lg, Bimmelbeule
-
Hallo Bimmelbeule,
Nummerierung
Oh. Verflixt. Die befindet sich ja ebenfalls im overflow-Bereich. Notlösung wäre ein div im li, das den Inhalt aufnimmt, und für das Du overflow:hidden setzt.
Ob für <code> ein
max-width:100%zusammen mitoverflow-xhidden funktioniert, könnte man auch probieren. Wenn dein code-Element margin hat, musst Du den von den 100% abziehen (mitcalc(100% - 0.5em)oder so) oder drauf verzichten. Wenn dein code-Element Padding hat, brauchst Du das nicht abzuziehen. Dafür setzebox-sizing:border-box.Was anderes fällt mir jetzt nicht ein, außer vielleicht noch generell Block-Code (
display:block) zu verwenden und damit ein paar inline-Problemem aus dem Weg zu gehen.Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf!
Oh. Verflixt. Die befindet sich ja ebenfalls im overflow-Bereich. Notlösung wäre ein div im li, das den Inhalt aufnimmt, und für das Du overflow:hidden setzt.
Leider verwendet bashlog keine Vorlage, sondern generiert den HTML-Code aus dem Script… da würde ich ungerne dran rum pfuschen. CSS kann ich separat pimpen…
Ob für <code> ein
max-width:100%zusammen mitoverflow-xhidden funktioniert, könnte man auch probieren.Das scheint leider nicht zu funktionieren…
Trotzdem Danke für die Hilfe!
Rolf
-
-
-
-
Hallo!
einmal dumm von mir nachgefragt. Warum benutzt du nicht:
code { word-wrap: break-word; word-break: break-word; }Gruß Michael
-
Hallo Michael!
einmal dumm von mir nachgefragt. Warum benutzt du nicht:
code { word-wrap: break-word; word-break: break-word; }Weil ich es schlicht nicht kannte… und ich beim recherchieren offensichtlich die falschen Suchwörter nutzte… 🤥
code { word-break: break-word; }Funktioniert beides… habe mich für word-break entschieden.
Supa! Danke für deine Hilfe! 😄
Lg, Bimmelbeule
-