Versionen dieses Beitrags

Automatischer Zeilenumbruch in einer DIV ohne fester breite

Gb 80x80 Gunnar Bittersmann
  • Automatischer Zeilenumbruch in einer DIV ohne fester breite
  • @@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*{:@en}-Paragraph absolut positioniert ist“ ein Nachteil ist, ist es naheliegend, darauf zu verzichten.
  • Du willst, dass sich der *ruler*{:@en}[^ruler] „Im Lande Mordor, wo die Schatten droh’n!“[^apos] so breit macht wie es sein Inhalt erfordert? `width: max-content`
  • Die `section`-Box soll sich nicht breiter machen als es der *ruler*{:@en} erfordert? `width: min-content`
  • Das Ganze noch garniert mit Präfixen und `max-width: 100%` – [fertig!](https://codepen.io/gunnarbittersmann/pen/LOWwvv)
  • [^ruler]: Ich hab diesem Absatz mal eine Klase gegeben – das erscheint mir sinnvoller. Es wäre aber auch mit deinem Markup und `section p:not(.dependent)`{:.language-css} gegangen.
  • [^ruler]: 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)`{:.language-css} gegangen.
  • [^apos]: Ich hab den Fliegenschiss mal durch einen Apostroph ersetzt.
  • LLAP 🖖
  • PS: [Edge und IE](https://caniuse.com/#feat=intrinsic-width) versetzt man in den IE7-Modus und man macht das mit [CSS-Expressions](http://bittersmann.de/articles/css-expressions/). 🤣
  • --
  • “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)