Overflow:scroll bei variabler containerbreite

  • Hallo,


    Ich hab folgendes Problem:


    Vorlage:

    Ein verschachteltes Div Element, bei der das Elternelement als äusserer Rahmen dient. Beide auf 100 % width. Mit leichtem Abstand zum Rand. Beide mit 1px. Border, Ecken abgerundet. Ein Kasten mit doppelrahmen entsteht.


    Darin zwei weitere divs, anderer Background, damit ebenfalls ein abgesetzter doppelrahmen entsteht.


    Bei blindtext, egal wie lang, verhalten sich die Boxen tadellos. Am Ende des Bildschirms findet der automatische Zeilenumbruch statt. Wird das Seitenverhältnis gekippt. (Handy wird gedreht), wird alles angepasst. Wunderbar.


    Jetzt das Problem:


    Es soll ein langer String, ein Dateipfad, angezeigt werden. Der, da am Stück, jedem zeilumbruch trotzt.


    Beim 'kurzen' Seitenverhältnis, also handy hochkant, ragt er über die 100% heraus.

    Folge. Die Fenster werden gnadenlos auf die Breite des Strings hochgezogen.


    Overflow:scroll wird komplett ignoriert. Die Fenster ragen über den view rechts raus. Können aber per wischen angezeigt werden. Die gesammte Page wird dann verschoben. Ob horizontale scrollbars dabei entstehen kann ich zur Zeit nicht sehen, da ich alles vom Smartphone erledige. Die Page lässt sich auch per Finger verkleinern. So das alles draufpasst. Aber dann ist natürlich auch alles andere drumherum kleiner.


    Stelle ich bei der inneren Box eine feste Breite ein, kann man prima sehen, wie der Dateipfad aus dem Fenster rausragt. Die Formatierung des restes bleibt erhalten.


    Packe ich dann ins Innere fenster overflow:scroll rein, wird der string ins Fenster gebannt und abgeschnitten, kann aber per Wischer komplett betrachtet werden.


    Wie schaffe ich es, das dieses Verhalten auch bei flexiblen Breitenangaben möglich ist? Ich hab alles probiert, ich kriegs nicht hin 😭


    Premiumwunsch:


    Äussere doppelbox: Breite 100%- 20px rechts.


    Innere box: Breite 100% von der äußeren Box - 20px links / rechts.

    Sollte die Änderung des Seitenverhältnis dazu führen, daß die 100% Breite zb 350px überschreitet, soll die Box genau bei 350px bleiben, mittig plaziert.


    Zusätzlich, unabhängig von der breite der inneren Box: sollte ein automatischer Zeilenumbruch im Inneren nicht möglich sein (zb länger Dateipfad) bleibt die Box in der ihr bestimmten Breite, der Inhalt kann dann per horizontalen scroll (overflow:scroll) betrachtet werden....



    Wer kann helfen?

  • Das ist der Code.


    In Zeile 41 erfolgt die Ausgabe des langen Strings...


    #textbox2_1 und #textbox2_2 sollen richtig funktionieren.


    Es kann sein das dort nun das ein oder andere durcheinander ist, da ich bereits viel mit position und so probiert habe. Nix klappt.

  • ????


    Nimm einen belieb langen String. Ohne Leerzeichen. Da kann das php weg sein. Das ändert nichts.


    Zb:


    Ichbineinbelieglangertextderkeineleerzeichenenthält.....


    Aber ich probiere es


    Besser kann ichs nicht darstellen.


    Sieht sehr wüst aus

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!