Ich habe mehrere div s, die alle als Inline-Blöcke formatiert sind und daher in einer Reihe nebeneinander sitzen. Diese divs haben eine max-width von 140px und enthalten Text, der dazu führt, dass sie in der Breite bis zu dieser Größe variieren.
Wie in dieser Geige demonstriert , Text, der breiter ist als max-width Eigenschaft Wraps, wie Sie es erwarten würden. Das Problem ist, dass es auch scheint, dass sein Container div auf dem max-width bleibt, obwohl der umbrochene Text technisch nicht so viel Platz benötigt.
Gibt es einen browserübergreifenden, HTML / CSS-only Weg, um diese Blöcke auf die kleinste Breite zu "schrumpfen", sobald der Text umgebrochen ist? Mir ist bewusst, dass ich es mit entsprechend platziertem% co_de% s erzwingen kann, aber diese Blöcke sollen vom Benutzer eingegebenen Text enthalten.
@BoltClock erklärt das Problem in Ссылка
Ihre einzige Option ist JavaScript.
Sie können dies tun, indem Sie die Breite jedes div verkleinern, bis sich die Höhe ändert:
Anstelle von max-width: 140px sollten Sie width: min-content in Erwägung ziehen.
CSS
%Vor%DEMO: Ссылка
Hinweis: Bevor Sie min-content implementieren, überprüfen Sie Präfixanforderungen und Browser-Unterstützung .
Ich bin mir nicht sicher, ob es eine CSS-Lösung gibt, wie Sie es wünschen. Falls Sie JavaScript ausprobieren möchten, kann Ihnen die folgende Antwort helfen: