Versionen dieses Beitrags

Automatischer Zeilenumbruch in einer DIV ohne fester breite

Thepoeppel crop Rolf B
  • Automatischer Zeilenumbruch in einer DIV ohne fester breite
  • 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:
  • ~~~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:
  • ~~~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 depenent-Paragraph anzupassen; das wird Javascript brauchen.
  • 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_
  • --
  • sumpsi - posui - clusi