Automatischer Zeilenumbruch in einer DIV ohne fester breite

[Khan]

Moin Leute,

habe eine DIV ohne fester breite, responsive, allerdings wird die Breite automatisch gestellt durch weitere DIV's die darin erhalten sind.

Es geht darum das in der Haupt DIV ein längerer <p></p> Absatz Text geschrieben ist aber der bricht nicht um und verbreitert die Haupt DIV, soll aber automatisch umgebrochen werden, damit die Breite der Haupt DIV nicht verändert wird.

Der Haupt DIV eine feste Breite zu vergeben würde mein responsive Design kaputt machen.

Kennt jemand eine Lösung dafür?

MfG Khan

[MrMurphy1]

Hallo

Das ist das ganz normale Verhalten. Allerdings ist deinen Angaben nicht zu entnehmen, in wie fern dieses Verhalten dein Layout zerstört.

Du könntest dem p-Element eine maximale Breite geben. Das ist in der Regel aber nicht sinnvoll.

div-Elemente werden heutzutage nur noch in Ausnahmefällen verwendet. Es wäre sinnvoll wenn du dich mit den aktuellen Containern beschäftigen würdest.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Khan

Es geht darum das in der Haupt DIV ein längerer <p></p> Absatz Text geschrieben ist aber der bricht nicht um und verbreitert die Haupt DIV

Was hat du getan, damit das so ist?

soll aber automatisch umgebrochen werden, damit die Breite der Haupt DIV nicht verändert wird.

Was immer du getan hast, tu es nicht.

LLAP 🖖

PS: Die Fehlerberichtigungen hast du gesehen?

[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

[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. ↩︎

[Rolf B]

Hallo Gunnar,

der ruler in meinem Beispiel war nicht der Schatten-Paragraph, sondern der breitere von Preiszeile und Schattenparagraph. Ist aber kein Problem, leg ich halt um header und Schatten-Paragraph ein div mit class="ruler". Fettich.

Prinzipiell klingt das nicht schlecht und es ist toll, dass sowas entsteht - aber man sollte „experimentelle Technologie“ auch als solche deklarieren, und ICH bin auch noch nicht so weit, den MS Browsern die Beachtenswürdigkeit abzusprechen. Die „Lösung“, über einen Kompatibilitätsmodus in einen Uralt-Betrieb zurückzuschalten, von dem Du auf deiner Seite ja selbst abrätst, kann ich nur als schlechten Scherz empfinden. Er dürfte auch noch eine Menge anderer, unerwünschter Auswirkungen haben.

Vor allem schreibt der Entwurf selbst über sich:

This draft is undergoing changes and many parts are not consistent with other modules of CSS. Please, refer to CSS level 2 [CSS21] instead for the definition of the basic box model.

Dann doch lieber zum jetzigen Zeitpunkt eine Lösung, die sich mit JS enhanced und ohne JS eine weniger perfekte Darstellung bietet.

Rolf

[Gunnar Bittersmann]

@@Rolf B

aber man sollte „experimentelle Technologie“ auch als solche deklarieren

Das hatte ich getan.

und ICH bin auch noch nicht so weit, den MS Browsern die Beachtenswürdigkeit abzusprechen.

Ich auch nicht. Mit Jeremy Keith’ Worten: “I support every browser …but I optimise for none.”

über einen Kompatibilitätsmodus in einen Uralt-Betrieb zurückzuschalten … dürfte auch noch eine Menge anderer, unerwünschter Auswirkungen haben.

Natürlich. Nicht machen, Kinder.

This draft is undergoing changes and many parts are not consistent with other modules of CSS. Please, refer to CSS level 2 [CSS21] instead for the definition of the basic box model.

Auf jeder Arzneimittelpackungsbeilage steht, dass du das Zeugs besser nicht nehmen solltest. Du schluckst es trotzdem.

Dann doch lieber zum jetzigen Zeitpunkt eine Lösung, die sich mit JS enhanced und ohne JS eine weniger perfekte Darstellung bietet.

Und was genau spricht gegen eine Lösung, die sich mit CSS enhancet und ohne Unterstützung in manchen Browsern eine weniger perfekte Darstellung bietet?

LLAP 🖖

[Khan]

Ich habe das gelöst wie hier erwähnt mit max-width. Habe ich vorher probiert aber ging nicht, mein Fehler war ich habe % angegeben anstatt px.

Case closed! Thanks

[Matthias Apsel]

Hallo Khan,

mein Fehler war ich habe % angegeben anstatt px.

px zu verwenden, ist vielleicht nicht die beste Idee.

Bis demnächst
Matthias