Automatischer Zeilenumbruch in einer DIV ohne fester breite

[Rolf B]

Hallo Khan,

"ein div ohne feste Breite" ist erstmal so breit wie sein container, es sei denn, du hast an der CSS display-Eigenschaft geschraubt. Hast Du?

Eine wirklich gute Lösung habe ich auch nicht, aber eine Idee zum mogeln. In wie weit diese Idee mit Accessibility vereinbar ist, kann ich nicht so genau sagen.

HTML:

<section>
<header>
<span>Was kostet die Welt?</span>
<span>4711,50</span>
</header>
<p>Im Lande Mordor, wo die Schatten droh'n!</p>
<p class="dependent">Ein Ring, sie zu knechten, sie alle zu finden, ins Dunkel zu treiben und ewig zu binden.</p>
</section>

CSS:

section, span, p { border: 1px solid black; }
section  { display: inline-block; position:relative; padding-bottom: 5em; }

section header { display: flex; justify-content: space-between; }
section header span:nth-of-type(1) { flex: 1; }
section header span:nth-of-type(2) { flex: 0; }

p.dependent { position:absolute; width: 100%; }

Die Section hat beim gezeigten Text die Breite des "Im Lande Mordor" Paragraphen. Werden die Spans im Header-Bereich breiter, verbreitern sie irgendwann auch die section.

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.

Aber vielleicht tust Du Dich auch leichter, wenn Du konsequent das Layout von außen nach innen aufbaust, und weniger content-abhängig machst.

Rolf