Gunnar Bittersmann: Automatischer Zeilenumbruch in einer DIV ohne fester breite

Beitrag lesen

@@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 ruler1 „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.

-- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory