Automatischer Zeilenumbruch in einer DIV ohne fester breite

[Gunnar Bittersmann]

@@Rolf B

Dadurch, dass der dependent-Paragraph absolut positioniert ist (und die section relativ), passt er sich in seiner Breite an die Section an ohne ihre Breite beeinflussen zu können.

Nachteil: Man muss mit padding-bottom nachhelfen, damit der dependent-Paragraph noch innerhalb der Box der Section platziert wird. Und es gibt auch keine Chance, die Höhe der Section an die Höhe des dependent-Paragraph anzupassen; das wird Javascript brauchen.

Nein, braucht’s nicht. Wenn „dass der dependent-Paragraph absolut positioniert ist“ ein Nachteil ist, ist es naheliegend, darauf zu verzichten.

Du willst, dass sich der ruler^[1] „Im Lande Mordor, wo die Schatten droh’n!“^[2] so breit macht wie es sein Inhalt erfordert? width: max-content

Die section-Box soll sich nicht breiter machen als es der ruler erfordert? width: min-content

Das Ganze noch garniert mit Präfixen und max-width: 100% – fertig!

LLAP 🖖

PS: Edge und IE versetzt man in den IE7-Modus und man macht das mit CSS-Expressions. 🤣

---

1. Ich hab diesem Absatz mal eine Klasse gegeben – das erscheint mir sinnvoller. Es wäre aber auch mit deinem Markup und section p:not(.dependent) gegangen. ↩︎

2. Ich hab den Fliegenschiss mal durch einen Apostroph ersetzt. ↩︎